├── layers ├── ui │ ├── .npmrc │ ├── app.vue │ ├── public │ │ └── favicon.ico │ ├── .gitignore │ ├── components │ │ ├── Modal │ │ │ ├── Backdrop.vue │ │ │ ├── ModalFooter.vue │ │ │ ├── ModalBody.vue │ │ │ ├── ModalHeader.vue │ │ │ └── Modal.vue │ │ ├── Select │ │ │ ├── types.d.ts │ │ │ ├── Select.stories.ts │ │ │ └── Select.vue │ │ ├── Dropdown │ │ │ ├── DropdownButton.vue │ │ │ ├── types.d.ts │ │ │ ├── DropdownItem.vue │ │ │ ├── Dropdown.vue │ │ │ └── Dropdown.stories.ts │ │ ├── Card │ │ │ ├── CardBody.vue │ │ │ ├── CardFooter.vue │ │ │ ├── CardHeader.vue │ │ │ └── Card.vue │ │ ├── Collapsible │ │ │ ├── Collapsible.stories.ts │ │ │ ├── CollapsibleGroup.stories.ts │ │ │ ├── CollapsibleGroup.vue │ │ │ └── Collapsible.vue │ │ ├── Autocomplete │ │ │ ├── Autocomplete.stories.ts │ │ │ └── Autocomplete.vue │ │ ├── Menus │ │ │ ├── MenusItem.vue │ │ │ └── Menus.vue │ │ ├── Banner │ │ │ └── Banner.vue │ │ ├── Switch.vue │ │ └── Button │ │ │ ├── Button.stories.ts │ │ │ └── Button.vue │ ├── utils │ │ └── buttons.ts │ ├── nuxt.config.ts │ ├── package.json │ └── README.md ├── admin │ ├── .npmrc │ ├── app.vue │ ├── composables │ │ └── admin.ts │ ├── public │ │ └── favicon.ico │ ├── .gitignore │ ├── nuxt.config.ts │ ├── package.json │ ├── components │ │ └── admin │ │ │ ├── SidebarItem.vue │ │ │ ├── metric │ │ │ └── Item.vue │ │ │ ├── SidebarLink.vue │ │ │ ├── Header.vue │ │ │ └── Sidebar.vue │ ├── layouts │ │ └── admin.vue │ ├── README.md │ └── pages │ │ └── admin │ │ └── index.vue ├── auth │ ├── .npmrc │ ├── app.vue │ ├── public │ │ └── favicon.ico │ ├── .gitignore │ ├── nuxt.config.ts │ ├── middleware │ │ ├── guest.ts │ │ └── auth.ts │ ├── layouts │ │ └── auth.vue │ ├── components │ │ └── Auth │ │ │ └── Header.vue │ ├── package.json │ ├── server │ │ └── api │ │ │ └── auth │ │ │ └── login.post.ts │ ├── composables │ │ └── auth.ts │ ├── README.md │ └── pages │ │ └── auth │ │ ├── forgot-password.vue │ │ ├── reset-password.vue │ │ ├── register.vue │ │ └── login.vue ├── blog │ ├── .npmrc │ ├── app.vue │ ├── public │ │ └── favicon.ico │ ├── .gitignore │ ├── nuxt.config.ts │ ├── utils │ │ └── helpers.ts │ ├── components │ │ └── blog │ │ │ ├── PostImage.vue │ │ │ └── PostItem.vue │ ├── package.json │ ├── README.md │ └── pages │ │ └── blog │ │ ├── index.vue │ │ └── posts │ │ └── [id].vue ├── docs │ ├── .npmrc │ ├── app.vue │ ├── components │ │ ├── content │ │ │ ├── button │ │ │ │ ├── ButtonBasic.vue │ │ │ │ ├── ButtonBlock.vue │ │ │ │ ├── ButtonSizes.vue │ │ │ │ ├── ButtonVariants.vue │ │ │ │ ├── ButtonShadow.vue │ │ │ │ ├── ButtonColors.vue │ │ │ │ ├── ButtonDisabled.vue │ │ │ │ ├── ButtonRounded.vue │ │ │ │ └── ButtonIcons.vue │ │ │ ├── icon │ │ │ │ ├── IconBasic.vue │ │ │ │ ├── IconColors.vue │ │ │ │ └── IconSizes.vue │ │ │ ├── input │ │ │ │ ├── InputBasic.vue │ │ │ │ ├── InputHint.vue │ │ │ │ ├── InputVModel.vue │ │ │ │ ├── InputWithIcons.vue │ │ │ │ ├── InputVariants.vue │ │ │ │ ├── InputSizes.vue │ │ │ │ ├── InputError.vue │ │ │ │ └── InputTypes.vue │ │ │ ├── menus │ │ │ │ ├── MenusItems.vue │ │ │ │ └── MenusBasic.vue │ │ │ ├── dropdown │ │ │ │ ├── DropdownBasic.vue │ │ │ │ ├── DropdownRight.vue │ │ │ │ ├── DropdownLabel.vue │ │ │ │ ├── DropdownIcon.vue │ │ │ │ └── DropdownCustomActivator.vue │ │ │ ├── modal │ │ │ │ ├── ModalBasic.vue │ │ │ │ ├── ModalWithHeader.vue │ │ │ │ ├── ModalDismissableHeader.vue │ │ │ │ ├── ModalFullscreen.vue │ │ │ │ ├── ModalPersistent.vue │ │ │ │ └── ModalWithFooter.vue │ │ │ ├── select │ │ │ │ ├── SelectBasic.vue │ │ │ │ └── SelectMultiple.vue │ │ │ └── autocomplete │ │ │ │ ├── AutocompleteBasic.vue │ │ │ │ └── AutocompleteMultiple.vue │ │ ├── global │ │ │ ├── LivePreview.vue │ │ │ └── CodeBlock.vue │ │ └── docs │ │ │ └── Sidebar.vue │ ├── public │ │ └── favicon.ico │ ├── .gitignore │ ├── nuxt.config.ts │ ├── layouts │ │ └── docs.vue │ ├── package.json │ ├── pages │ │ └── docs │ │ │ ├── [...slug].vue │ │ │ └── swiper.vue │ └── README.md ├── landing │ ├── .npmrc │ ├── app.vue │ ├── composables │ │ └── states.ts │ ├── public │ │ └── favicon.ico │ ├── nuxt.config.ts │ ├── .gitignore │ ├── layouts │ │ └── landing.vue │ ├── pages │ │ └── index.vue │ ├── package.json │ ├── components │ │ └── landing │ │ │ ├── Quote.vue │ │ │ ├── Footer.vue │ │ │ ├── About.vue │ │ │ ├── FeatureGrid.vue │ │ │ ├── Nav.vue │ │ │ ├── FeatureTwoColumn.vue │ │ │ ├── Header.vue │ │ │ ├── Cta.vue │ │ │ ├── Hero.vue │ │ │ ├── MobileNav.vue │ │ │ └── Features.vue │ └── README.md └── store │ ├── .npmrc │ ├── layouts │ └── store.vue │ ├── app.vue │ ├── public │ └── favicon.ico │ ├── .gitignore │ ├── nuxt.config.ts │ ├── pages │ └── store │ │ └── index.vue │ ├── package.json │ ├── README.md │ └── components │ └── Store │ ├── Collection.vue │ ├── TechnicalSpecs.vue │ └── Hero.vue ├── .npmrc ├── tsconfig.json ├── .env.example ├── .storybook ├── preview-head.html ├── tailwind.css ├── preview.js └── main.js ├── commitlint.config.js ├── .husky └── commit-msg ├── postcss.config.js ├── .gitignore ├── .github └── FUNDING.yml ├── .vscode └── settings.json ├── layouts └── default.vue ├── components ├── Logo.vue └── PageHeader.vue ├── plugins └── gtag.client.ts ├── .eslintrc.cjs ├── app.vue ├── stores └── auth.ts ├── content └── docs │ ├── 0.getting-started │ └── installation.md │ └── 1.components │ ├── 3.dropdown-button.md │ ├── 7.icon.md │ ├── 5.menus-item.md │ ├── 2.dropdown-item.md │ ├── 4.menus.md │ ├── 0.autocomplete.md │ ├── 6.select.md │ ├── 1.dropdown.md │ ├── 0.button.md │ └── 5.modal.md ├── i18n.config.ts ├── LICENSE ├── nuxt.config.ts ├── tailwind.config.js ├── app.config.ts ├── README.md └── package.json /layers/ui/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /layers/admin/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /layers/auth/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /layers/blog/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /layers/docs/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /layers/landing/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /layers/store/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | STRAPI_URL=http://localhost:1337 2 | NUXT_PUBLIC_GA_ID=G-VALUE -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] } 2 | -------------------------------------------------------------------------------- /.storybook/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /layers/store/layouts/store.vue: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /layers/ui/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /layers/admin/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /layers/auth/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /layers/blog/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /layers/docs/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /layers/landing/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /layers/store/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit "${1}" 5 | -------------------------------------------------------------------------------- /layers/admin/composables/admin.ts: -------------------------------------------------------------------------------- 1 | export const useAdminSidebar = () => useState('sidebar', () => false) 2 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonBasic.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /layers/docs/components/content/icon/IconBasic.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /layers/landing/composables/states.ts: -------------------------------------------------------------------------------- 1 | export const useMobileMenu = () => useState('mobile-menu', () => false) 2 | -------------------------------------------------------------------------------- /layers/ui/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gravitano/nuxt3-tailwind-kit/HEAD/layers/ui/public/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .nuxt 4 | nuxt.d.ts 5 | .output 6 | .DS_Store 7 | .idea 8 | .env 9 | .vercel 10 | -------------------------------------------------------------------------------- /layers/admin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gravitano/nuxt3-tailwind-kit/HEAD/layers/admin/public/favicon.ico -------------------------------------------------------------------------------- /layers/auth/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gravitano/nuxt3-tailwind-kit/HEAD/layers/auth/public/favicon.ico -------------------------------------------------------------------------------- /layers/blog/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gravitano/nuxt3-tailwind-kit/HEAD/layers/blog/public/favicon.ico -------------------------------------------------------------------------------- /layers/docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gravitano/nuxt3-tailwind-kit/HEAD/layers/docs/public/favicon.ico -------------------------------------------------------------------------------- /layers/store/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gravitano/nuxt3-tailwind-kit/HEAD/layers/store/public/favicon.ico -------------------------------------------------------------------------------- /layers/landing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gravitano/nuxt3-tailwind-kit/HEAD/layers/landing/public/favicon.ico -------------------------------------------------------------------------------- /layers/admin/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | .DS_Store 10 | -------------------------------------------------------------------------------- /layers/admin/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | 4 | }) 5 | -------------------------------------------------------------------------------- /layers/auth/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | .DS_Store 10 | -------------------------------------------------------------------------------- /layers/auth/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | 4 | }) 5 | -------------------------------------------------------------------------------- /layers/blog/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | .DS_Store 10 | -------------------------------------------------------------------------------- /layers/blog/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | 4 | }) 5 | -------------------------------------------------------------------------------- /layers/docs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | .DS_Store 10 | -------------------------------------------------------------------------------- /layers/docs/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | 4 | }) 5 | -------------------------------------------------------------------------------- /layers/landing/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | 4 | }) 5 | -------------------------------------------------------------------------------- /layers/store/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | .DS_Store 10 | -------------------------------------------------------------------------------- /layers/store/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | 4 | }) 5 | -------------------------------------------------------------------------------- /layers/ui/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | .DS_Store 10 | -------------------------------------------------------------------------------- /layers/landing/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env 8 | dist 9 | .DS_Store 10 | -------------------------------------------------------------------------------- /layers/ui/components/Modal/Backdrop.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /layers/docs/components/content/input/InputBasic.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /layers/ui/components/Select/types.d.ts: -------------------------------------------------------------------------------- 1 | export type SelectItem = { 2 | text: string; 3 | value: string | number; 4 | divider?: boolean; 5 | } 6 | -------------------------------------------------------------------------------- /layers/docs/components/global/LivePreview.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: gravitano # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | ko_fi: gravitano 5 | -------------------------------------------------------------------------------- /layers/ui/utils/buttons.ts: -------------------------------------------------------------------------------- 1 | export const variants = ['primary', 'secondary', 'tertiary', 'ghost'] 2 | export const colors = ['primary', 'secondary', 'success', 'error', 'warning','light', 'dark'] 3 | -------------------------------------------------------------------------------- /layers/docs/components/content/input/InputHint.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /layers/ui/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | components: [ 4 | { path: './components', prefix: 'V' } 5 | ] 6 | }) 7 | -------------------------------------------------------------------------------- /layers/blog/utils/helpers.ts: -------------------------------------------------------------------------------- 1 | export const postDate = (date: string | Date) => { 2 | return new Date(date).toLocaleDateString('en-US', { 3 | year: 'numeric', 4 | month: 'long', 5 | day: 'numeric', 6 | }) 7 | } 8 | -------------------------------------------------------------------------------- /layers/ui/components/Modal/ModalFooter.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /layers/blog/components/blog/PostImage.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /layers/docs/components/global/CodeBlock.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /layers/store/pages/store/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /layers/landing/layouts/landing.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.enable": false, 3 | "editor.formatOnSave": false, 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll.eslint": "explicit" 6 | }, 7 | "i18n-ally.localesPaths": [ 8 | "locales" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /layers/ui/components/Dropdown/DropdownButton.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import './tailwind.css'; 2 | 3 | export const parameters = { 4 | actions: { argTypesRegex: '^on[A-Z].*' }, 5 | controls: { 6 | matchers: { 7 | color: /(background|color)$/i, 8 | date: /Date$/, 9 | }, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonBlock.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /layers/docs/components/content/icon/IconColors.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /layers/ui/components/Modal/ModalBody.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /plugins/gtag.client.ts: -------------------------------------------------------------------------------- 1 | import VueGtag from 'vue-gtag' 2 | 3 | export default defineNuxtPlugin((nuxtApp) => { 4 | const config = useRuntimeConfig() 5 | 6 | nuxtApp.vueApp.use(VueGtag, { 7 | config: { 8 | id: config.public.gaId, 9 | }, 10 | }, nuxtApp.$router) 11 | }) 12 | -------------------------------------------------------------------------------- /layers/docs/components/content/icon/IconSizes.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /layers/docs/components/content/menus/MenusItems.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /layers/ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare" 9 | }, 10 | "devDependencies": { 11 | "nuxt": "^3.2.3" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /layers/docs/components/content/input/InputVModel.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /layers/ui/components/Card/CardBody.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonSizes.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /layers/ui/components/Card/CardFooter.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /layers/landing/pages/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: '@antfu', 3 | rules: { 4 | 'vue/custom-event-name-casing': ['off', 5 | 'camelCase' || 'kebab-case', 6 | { 7 | ignores: [], 8 | }, 9 | ], 10 | 'vue/v-on-event-hyphenation': ['off', { 11 | autofix: true, 12 | ignore: [], 13 | }], 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /layers/ui/components/Dropdown/types.d.ts: -------------------------------------------------------------------------------- 1 | export interface DropdownProps { 2 | modelValue: boolean 3 | btnProps: any 4 | label: string 5 | right: boolean 6 | items?: DropdownItemProps[] 7 | } 8 | 9 | export interface DropdownItemProps { 10 | text: string 11 | to?: string 12 | href?: string 13 | icon?: string 14 | newTab?: boolean 15 | } -------------------------------------------------------------------------------- /layers/auth/middleware/guest.ts: -------------------------------------------------------------------------------- 1 | import { useAuthStore } from '~~/stores/auth' 2 | 3 | export default defineNuxtRouteMiddleware((to) => { 4 | const auth = useAuthStore() 5 | const router = useRouter() 6 | 7 | if (auth.loggedIn) { 8 | return router.push({ 9 | path: '/admin', 10 | query: { 11 | from: to.path, 12 | }, 13 | }) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /layers/auth/middleware/auth.ts: -------------------------------------------------------------------------------- 1 | import { useAuthStore } from '~~/stores/auth' 2 | 3 | export default defineNuxtRouteMiddleware((to) => { 4 | const auth = useAuthStore() 5 | const router = useRouter() 6 | 7 | if (!auth.loggedIn) { 8 | return router.push({ 9 | path: '/auth/login', 10 | query: { 11 | next: to.path, 12 | }, 13 | }) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /layers/docs/components/content/dropdown/DropdownBasic.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /layers/docs/components/content/input/InputWithIcons.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /layers/auth/layouts/auth.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /layers/docs/components/content/dropdown/DropdownRight.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /layers/docs/components/content/dropdown/DropdownLabel.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /layers/auth/components/Auth/Header.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | -------------------------------------------------------------------------------- /layers/ui/components/Card/CardHeader.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 20 | -------------------------------------------------------------------------------- /layers/docs/components/content/dropdown/DropdownIcon.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /layers/docs/components/content/modal/ModalBasic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /layers/docs/layouts/docs.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonVariants.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 17 | -------------------------------------------------------------------------------- /components/PageHeader.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /layers/admin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare" 9 | }, 10 | "devDependencies": { 11 | "nuxt": "^3.2.3" 12 | }, 13 | "files": [ 14 | "components", 15 | "composables", 16 | "layouts", 17 | "pages", 18 | "public", 19 | "app.vue", 20 | "nuxt.config.ts" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonShadow.vue: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /layers/auth/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare" 9 | }, 10 | "devDependencies": { 11 | "nuxt": "^3.2.3" 12 | }, 13 | "files": [ 14 | "components", 15 | "composables", 16 | "layouts", 17 | "middleware", 18 | "pages", 19 | "public", 20 | "app.vue", 21 | "nuxt.config.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /layers/blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare" 9 | }, 10 | "devDependencies": { 11 | "nuxt": "^3.2.3" 12 | }, 13 | "files": [ 14 | "components", 15 | "composables", 16 | "layouts", 17 | "middleware", 18 | "pages", 19 | "public", 20 | "app.vue", 21 | "nuxt.config.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /layers/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare" 9 | }, 10 | "devDependencies": { 11 | "nuxt": "^3.2.3" 12 | }, 13 | "files": [ 14 | "components", 15 | "composables", 16 | "layouts", 17 | "middleware", 18 | "pages", 19 | "public", 20 | "app.vue", 21 | "nuxt.config.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /layers/landing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare" 9 | }, 10 | "devDependencies": { 11 | "nuxt": "^3.2.3" 12 | }, 13 | "files": [ 14 | "components", 15 | "composables", 16 | "layouts", 17 | "middleware", 18 | "pages", 19 | "public", 20 | "app.vue", 21 | "nuxt.config.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /layers/store/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare" 9 | }, 10 | "devDependencies": { 11 | "nuxt": "^3.2.3" 12 | }, 13 | "files": [ 14 | "components", 15 | "composables", 16 | "layouts", 17 | "middleware", 18 | "pages", 19 | "public", 20 | "app.vue", 21 | "nuxt.config.ts" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /layers/docs/components/content/input/InputVariants.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /layers/docs/components/content/modal/ModalWithHeader.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 20 | -------------------------------------------------------------------------------- /layers/docs/components/content/select/SelectBasic.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 21 | -------------------------------------------------------------------------------- /app.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /layers/docs/components/content/modal/ModalDismissableHeader.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 20 | -------------------------------------------------------------------------------- /layers/docs/components/content/autocomplete/AutocompleteBasic.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 21 | -------------------------------------------------------------------------------- /layers/docs/components/content/modal/ModalFullscreen.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /layers/docs/components/content/modal/ModalPersistent.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /layers/docs/components/content/select/SelectMultiple.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | -------------------------------------------------------------------------------- /layers/admin/components/admin/SidebarItem.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /layers/docs/components/content/autocomplete/AutocompleteMultiple.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | -------------------------------------------------------------------------------- /layers/auth/server/api/auth/login.post.ts: -------------------------------------------------------------------------------- 1 | const DUMMY_USER = { 2 | id: 1, 3 | name: 'John Doe', 4 | email: 'admin@example.com', 5 | password: 'admin', 6 | } 7 | 8 | export default defineEventHandler(async (event) => { 9 | const body = await readBody(event) 10 | 11 | if (body.email !== DUMMY_USER.email || body.password !== DUMMY_USER.password) { 12 | setResponseStatus(event, 401, 'Unauthenticated') 13 | return { 14 | error: 'Unauthenticated', 15 | } 16 | } 17 | 18 | return { 19 | token: `dummy-token-${DUMMY_USER.id}`, 20 | user: DUMMY_USER, 21 | } 22 | }) 23 | -------------------------------------------------------------------------------- /layers/landing/components/landing/Quote.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | -------------------------------------------------------------------------------- /layers/admin/layouts/admin.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonColors.vue: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /layers/docs/components/content/input/InputSizes.vue: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /layers/auth/composables/auth.ts: -------------------------------------------------------------------------------- 1 | import type { AuthUser } from '~~/stores/auth' 2 | 3 | export const useAuthStorage = ( 4 | { authTokenKey, authUserKey } = { 5 | authTokenKey: 'auth.token', 6 | authUserKey: 'auth.user', 7 | }, 8 | ) => { 9 | const user = useCookie(authUserKey) 10 | const token = useCookie(authTokenKey) 11 | 12 | const store = (newToken: string, newUser: Record) => { 13 | token.value = newToken 14 | user.value = newUser 15 | } 16 | 17 | const clear = () => { 18 | user.value = null 19 | token.value = '' 20 | } 21 | 22 | return { store, clear, user, token } 23 | } 24 | -------------------------------------------------------------------------------- /layers/docs/components/content/dropdown/DropdownCustomActivator.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 20 | -------------------------------------------------------------------------------- /layers/docs/components/content/input/InputError.vue: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /layers/ui/components/Collapsible/Collapsible.stories.ts: -------------------------------------------------------------------------------- 1 | import type { Story } from '@storybook/vue3' 2 | import Collapsible from './Collapsible.vue' 3 | 4 | export default { 5 | title: 'Components/Collapsible', 6 | component: Collapsible, 7 | args: { 8 | modelValue: false, 9 | title: 'Item', 10 | content: 'lorem ipsum dolor sit amet', 11 | }, 12 | } 13 | 14 | const Template: Story = (args, { argTypes }) => ({ 15 | components: { Collapsible }, 16 | setup() { 17 | return { args, argTypes } 18 | }, 19 | template: ` 20 | 21 | `, 22 | }) 23 | 24 | export const Default = Template.bind({}) 25 | Default.args = {} 26 | -------------------------------------------------------------------------------- /layers/docs/components/content/modal/ModalWithFooter.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonDisabled.vue: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /stores/auth.ts: -------------------------------------------------------------------------------- 1 | import { defineStore } from 'pinia' 2 | 3 | export interface AuthUser extends Record {} 4 | 5 | export interface AuthState { 6 | loggedIn: boolean 7 | user: AuthUser | null 8 | loading: boolean 9 | } 10 | 11 | export const useAuthStore = defineStore({ 12 | id: 'auth', 13 | state: (): AuthState => { 14 | const { token, user } = useAuthStorage() 15 | 16 | return { 17 | loggedIn: !!token.value, 18 | user: user.value, 19 | loading: false, 20 | } 21 | }, 22 | actions: { 23 | logout() { 24 | const { clear } = useAuthStorage() 25 | clear() 26 | 27 | this.loggedIn = false 28 | this.user = null 29 | }, 30 | }, 31 | }) 32 | -------------------------------------------------------------------------------- /content/docs/0.getting-started/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | To get this template, use `nuxi`: 4 | 5 | ```bash 6 | npx nuxi init -t gh:gravitano/nuxt3-tailwind-kit my-app 7 | cd my-app 8 | pnpm install 9 | pnpm dev 10 | ``` 11 | 12 | ## Development 13 | 14 | We recommend to look at the [documentation](https://nuxt.com/docs). 15 | 16 | Make sure to install the dependencies 17 | 18 | ```bash 19 | pnpm install 20 | ``` 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | pnpm dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | pnpm build 34 | ``` 35 | 36 | Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment). 37 | -------------------------------------------------------------------------------- /layers/admin/components/admin/metric/Item.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 30 | -------------------------------------------------------------------------------- /layers/docs/pages/docs/[...slug].vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | // const { mergeConfig } = require('vite'); 2 | 3 | module.exports = { 4 | stories: [ 5 | // '../components/**/*.stories.mdx', 6 | // '../components/**/*.stories.@(js|jsx|ts|tsx)', 7 | '../ui/components/**/*.stories.mdx', 8 | '../ui/components/**/*.stories.@(js|jsx|ts|tsx)', 9 | ], 10 | addons: [ 11 | '@storybook/addon-links', 12 | '@storybook/addon-essentials', 13 | '@storybook/addon-interactions', 14 | ], 15 | framework: '@storybook/vue3', 16 | core: { 17 | builder: '@storybook/builder-vite', 18 | }, 19 | features: { 20 | storyStoreV7: true, 21 | }, 22 | // async viteFinal(config, { configType }) { 23 | // return mergeConfig(config, { 24 | // plugins: [ 25 | // ], 26 | // }); 27 | // }, 28 | }; 29 | -------------------------------------------------------------------------------- /i18n.config.ts: -------------------------------------------------------------------------------- 1 | // export default defineI18nConfig(() => ({ 2 | // legacy: false, 3 | // locale: 'en', 4 | // messages: { 5 | // en: { 6 | // app_name: 'Nuxt Tailwind Kit', 7 | // app_description: 8 | // 'Quick Boilerplate built on top of Nuxt 3 and Tailwind CSS', 9 | // menu_home: 'Home', 10 | // menu_store: 'Store', 11 | // menu_blog: 'Blog', 12 | // menu_dashboard: 'Dashboard', 13 | // }, 14 | // id: { 15 | // app_name: 'Nuxt Tailwind Kit', 16 | // app_description: 17 | // 'Boilerplate cepat yang dibangun dari Nuxt 3 and Tailwind CSS', 18 | // menu_home: 'Beranda', 19 | // menu_store: 'Toko', 20 | // menu_blog: 'Blog', 21 | // menu_dashboard: 'Dasbor', 22 | // }, 23 | // }, 24 | // })) 25 | -------------------------------------------------------------------------------- /layers/ui/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /layers/admin/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /layers/auth/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /layers/blog/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /layers/docs/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /layers/landing/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /layers/store/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonRounded.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /layers/landing/components/landing/Footer.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 28 | -------------------------------------------------------------------------------- /layers/ui/components/Modal/ModalHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 35 | -------------------------------------------------------------------------------- /layers/admin/components/admin/SidebarLink.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 37 | -------------------------------------------------------------------------------- /content/docs/1.components/3.dropdown-button.md: -------------------------------------------------------------------------------- 1 | # Dropdown Button 2 | 3 | Subcomponent of ``. This component is used to create custom dropdown activator. 4 | 5 | ## Example 6 | 7 | ```vue 8 | 11 | 12 | 27 | ``` 28 | 29 | 30 | ## Slots 31 | 32 | ### default 33 | 34 | The default Vue slot. Used to place custom dropdown activator. 35 | -------------------------------------------------------------------------------- /layers/ui/components/Collapsible/CollapsibleGroup.stories.ts: -------------------------------------------------------------------------------- 1 | import type { Story } from '@storybook/vue3' 2 | import CollapsibleGroup from './CollapsibleGroup.vue' 3 | 4 | const genItems = (length = 5): any[] => 5 | Array.from({ length }, (_, v) => ({ 6 | title: `Item ${v + 1}`, 7 | content: `lorem ipsum ${v + 1}`, 8 | })) 9 | 10 | const items = genItems(5) 11 | 12 | export default { 13 | title: 'Components/CollapsibleGroup', 14 | component: CollapsibleGroup, 15 | args: { 16 | modelValue: false, 17 | accordion: false, 18 | items, 19 | }, 20 | } 21 | 22 | const Template: Story = (args, { argTypes }) => ({ 23 | components: { CollapsibleGroup }, 24 | setup() { 25 | return { args, argTypes } 26 | }, 27 | template: ` 28 | 29 | `, 30 | }) 31 | 32 | export const Default = Template.bind({}) 33 | Default.args = {} 34 | 35 | export const Accordion = Template.bind({}) 36 | Accordion.args = { 37 | accordion: true, 38 | } 39 | -------------------------------------------------------------------------------- /layers/docs/components/content/input/InputTypes.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 51 | -------------------------------------------------------------------------------- /layers/landing/components/landing/About.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 35 | -------------------------------------------------------------------------------- /layers/auth/pages/auth/forgot-password.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Warsono 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /layers/ui/components/Autocomplete/Autocomplete.stories.ts: -------------------------------------------------------------------------------- 1 | import type { Story } from '@storybook/vue3' 2 | import Autocomplete from './Autocomplete.vue' 3 | 4 | const items = [ 5 | { id: 1, text: 'Wade Cooper' }, 6 | { id: 2, text: 'Arlene Mccoy' }, 7 | { id: 3, text: 'Devon Webb' }, 8 | { id: 4, text: 'Tom Cook' }, 9 | { id: 5, text: 'Tanya Fox' }, 10 | { id: 6, text: 'Hellen Schmidt' }, 11 | ] 12 | 13 | export default { 14 | title: 'Components/Autocomplete', 15 | component: Autocomplete, 16 | args: { 17 | items, 18 | }, 19 | } 20 | 21 | const Template: Story = args => ({ 22 | // Components used in your story `template` are defined in the `components` object 23 | components: { Autocomplete }, 24 | // The story's `args` need to be mapped into the template through the `setup()` method 25 | setup() { 26 | return { args } 27 | }, 28 | // And then the `args` are bound to your component with `v-bind="args"` 29 | template: '', 30 | }) 31 | 32 | export const Default = Template.bind({}) 33 | Default.args = {} 34 | 35 | export const Multiple = Template.bind({}) 36 | Multiple.args = { 37 | multiple: true, 38 | } 39 | -------------------------------------------------------------------------------- /layers/docs/components/content/menus/MenusBasic.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 50 | -------------------------------------------------------------------------------- /layers/blog/pages/blog/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 35 | -------------------------------------------------------------------------------- /layers/ui/components/Menus/MenusItem.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 41 | -------------------------------------------------------------------------------- /content/docs/1.components/7.icon.md: -------------------------------------------------------------------------------- 1 | # Icon 2 | 3 | The `` component comes from [Nuxt Icon](https://github.com/nuxt-modules/icon) module. You can view list of available icons [here](https://icones.js.org/). 4 | 5 | ## Usage 6 | 7 | ::live-preview 8 | ::icon-basic 9 | :: 10 | 11 | ::code-block 12 | 13 | ```vue 14 | 17 | ``` 18 | :: 19 | 20 | ## Sizes 21 | 22 | To change the icon size, use the `size` prop. 23 | 24 | ::live-preview 25 | ::icon-sizes 26 | :: 27 | 28 | ::code-block 29 | 30 | ```vue 31 | 38 | ``` 39 | :: 40 | 41 | ## Colors 42 | 43 | To change to icon color, you can use Tailwind text color utility. 44 | 45 | ::live-preview 46 | ::icon-colors 47 | :: 48 | 49 | ::code-block 50 | 51 | ```vue 52 | 57 | ``` 58 | :: -------------------------------------------------------------------------------- /layers/ui/components/Collapsible/CollapsibleGroup.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 56 | -------------------------------------------------------------------------------- /layers/docs/components/content/button/ButtonIcons.vue: -------------------------------------------------------------------------------- 1 | 42 | -------------------------------------------------------------------------------- /layers/ui/components/Dropdown/DropdownItem.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 55 | -------------------------------------------------------------------------------- /layers/auth/pages/auth/reset-password.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 50 | -------------------------------------------------------------------------------- /layers/admin/pages/admin/index.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 63 | -------------------------------------------------------------------------------- /layers/ui/components/Banner/Banner.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 31 | -------------------------------------------------------------------------------- /layers/landing/components/landing/FeatureGrid.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 37 | -------------------------------------------------------------------------------- /layers/ui/components/Switch.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 50 | -------------------------------------------------------------------------------- /layers/ui/components/Select/Select.stories.ts: -------------------------------------------------------------------------------- 1 | import type { Story } from '@storybook/vue3' 2 | import Select from './Select.vue' 3 | import type { SelectItem } from './types' 4 | 5 | const genItems = (length = 5): SelectItem[] => 6 | Array.from({ length }, (_, v) => ({ 7 | text: `Item ${v + 1}`, 8 | value: v, 9 | })) 10 | 11 | const items = [...genItems(2), { divider: true }, ...genItems(3)] 12 | 13 | export default { 14 | title: 'Components/Select', 15 | component: Select, 16 | args: { 17 | modelValue: null, 18 | label: 'Choose', 19 | items, 20 | }, 21 | } 22 | 23 | const Template: Story = (args, { argTypes }) => ({ 24 | components: { Select }, 25 | setup() { 26 | return { args, argTypes } 27 | }, 28 | template: ` 29 |
30 | 51 | //
52 | // 53 | // 54 | // 55 | // 56 | //
57 | // 58 | //
59 | // `, 60 | // }); 61 | -------------------------------------------------------------------------------- /layers/landing/components/landing/Nav.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 44 | -------------------------------------------------------------------------------- /content/docs/1.components/5.menus-item.md: -------------------------------------------------------------------------------- 1 | # Menus Item 2 | 3 | Sub menu item. 4 | 5 | ## Usage 6 | 7 | Use `` component to add sub menu. 8 | 9 | ::live-preview 10 | ::menus-items 11 | :: 12 | :: 13 | 14 | ::code-block 15 | ```vue 16 | 24 | ``` 25 | :: 26 | 27 | ## Props 28 | 29 | | Prop | Type | Default Value | 30 | | ----------- | ------------------------- | ----------------------------- | 31 | | `title` | `string` | `''` | 32 | | `to` | `string \| RouteLocation` | `''` | 33 | | `icon` | `string` | `` | 34 | | `shortcut` | `string` | `` | 35 | | `header` | `string` | `` | 36 | | `divider` | `string` | `` | 37 | | `children` | `Props[]` | `` | 38 | | `placement` | `MenuPlacement` | `` | 39 | | `onClick` | `Function` | `(close: () => void) => void` | 40 | 41 | ## Event 42 | 43 | None. 44 | 45 | ## Types 46 | 47 | ```ts 48 | interface Props { 49 | to?: string | RouteLocation 50 | title: string 51 | icon?: string 52 | shortcut?: string 53 | header?: string 54 | divider?: boolean 55 | children?: Props[] 56 | placement?: MenuPlacement 57 | onClick?: (close: () => void) => void 58 | } 59 | ``` 60 | -------------------------------------------------------------------------------- /layers/ui/components/Card/Card.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | modules: [ 3 | '@nuxt/content', 4 | '@nuxt/icon', 5 | '@nuxtjs/tailwindcss', 6 | '@nuxtjs/i18n', 7 | '@nuxtjs/google-fonts', 8 | '@nuxtjs/fontaine', 9 | '@pinia/nuxt', 10 | '@vueuse/nuxt', 11 | ], 12 | i18n: { 13 | locales: ['en', 'id'], 14 | defaultLocale: 'en', 15 | vueI18n: { 16 | legacy: false, 17 | locale: 'en', 18 | messages: { 19 | en: { 20 | app_name: 'Nuxt Tailwind Kit', 21 | app_description: 22 | 'Quick Boilerplate built on top of Nuxt 3 and Tailwind CSS', 23 | menu_home: 'Home', 24 | menu_store: 'Store', 25 | menu_blog: 'Blog', 26 | menu_dashboard: 'Dashboard', 27 | }, 28 | id: { 29 | app_name: 'Nuxt Tailwind Kit', 30 | app_description: 31 | 'Boilerplate cepat yang dibangun dari Nuxt 3 and Tailwind CSS', 32 | menu_home: 'Beranda', 33 | menu_store: 'Toko', 34 | menu_blog: 'Blog', 35 | menu_dashboard: 'Dasbor', 36 | }, 37 | }, 38 | }, 39 | // vueI18n: './i18n.config.ts', // if you are using custom path, default 40 | }, 41 | runtimeConfig: { 42 | public: { 43 | gaId: '', 44 | }, 45 | }, 46 | googleFonts: { 47 | prefetch: true, 48 | preconnect: true, 49 | families: { 50 | Inter: [100, 200, 300, 400, 500, 600, 700, 800, 900], 51 | }, 52 | }, 53 | content: { 54 | highlight: { 55 | theme: { 56 | default: 'github-dark', 57 | }, 58 | }, 59 | preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'], 60 | }, 61 | 62 | vite: { 63 | vue: { 64 | script: { 65 | propsDestructure: true, 66 | }, 67 | }, 68 | }, 69 | 70 | devtools: { 71 | enabled: true, 72 | }, 73 | }) 74 | -------------------------------------------------------------------------------- /content/docs/1.components/2.dropdown-item.md: -------------------------------------------------------------------------------- 1 | # Dropdown Item 2 | 3 | Subcomponent of ``. This component is used as dropdown item. 4 | 5 | ## Example 6 | 7 | ```vue 8 | 18 | ``` 19 | 20 | ## Props 21 | 22 | | Prop | Type | Default | Description | 23 | | ---- | ---- | ------- | ----------- | 24 | | text | `string` | `undefined` | The text to display in the item. | 25 | | to | `string` | `undefined` | The target route for the item when used in a `nuxt-link`. | 26 | | href | `string` | `undefined` | The target URL for the item when used as a regular `a` tag. | 27 | | icon | `any` | `undefined` | The icon to display in the item. | 28 | | iconClass | `string` | `'w-5 h-5'` | The class for the icon. | 29 | | newTab | `boolean` | `undefined` | Specifies whether to open the link in a new tab. | 30 | | divider | `boolean` | `undefined` | Specifies whether to display a divider above the item. | 31 | 32 | 33 | ## Slots 34 | 35 | ### default 36 | 37 | The default Vue slot. Used to place text / content. 38 | 39 | ```vue 40 | 47 | ``` 48 | 49 | 50 | ### icon 51 | 52 | Slot for placing custom icon. 53 | 54 | ```vue 55 | 66 | ``` 67 | -------------------------------------------------------------------------------- /layers/landing/components/landing/FeatureTwoColumn.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 44 | -------------------------------------------------------------------------------- /layers/docs/components/docs/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 56 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require('tailwindcss/defaultTheme') 2 | const colors = require('tailwindcss/colors') 3 | 4 | const primary = colors.indigo 5 | const secondary = colors.pink 6 | const info = colors.sky 7 | const warning = colors.amber 8 | const success = colors.emerald 9 | const error = colors.red 10 | 11 | module.exports = { 12 | content: [ 13 | './assets/**/*.{vue,js,css}', 14 | './components/**/*.{vue,js}', 15 | './layouts/**/*.vue', 16 | './pages/**/*.vue', 17 | './server/**/*.{js,ts}', 18 | './plugins/**/*.{js,ts}', 19 | './nuxt.config.{js,ts}', 20 | './node_modules/windplus/styles/**/*.{vue,js,css}', 21 | './node_modules/windplus/styles/*.{vue,js,css}', 22 | './node_modules/windplus/styles/main.css', 23 | ], 24 | darkMode: 'class', // or 'media' or 'class' 25 | theme: { 26 | extend: { 27 | gridTemplateRows: { 28 | '[auto,auto,1fr]': 'auto auto 1fr', 29 | }, 30 | colors: { 31 | primary, 32 | secondary, 33 | info, 34 | warning, 35 | success, 36 | error, 37 | }, 38 | textColor: { 39 | skin: { 40 | base: 'var(--color-text-base)', 41 | muted: 'var(--color-text-muted)', 42 | active: 'var(--color-text-active)', 43 | hover: 'var(--color-text-hover)', 44 | icon: 'var(--color-text-icon)', 45 | }, 46 | }, 47 | backgroundColor: { 48 | skin: { 49 | 'fill': 'var(--color-fill)', 50 | 'fill-active': 'var(--color-fill-active)', 51 | 'fill-hover': 'var(--color-fill-hover)', 52 | 'icon-fill': 'var(--color-icon-fill)', 53 | }, 54 | }, 55 | fontFamily: { 56 | sans: ['Inter', ...defaultTheme.fontFamily.sans], 57 | }, 58 | }, 59 | }, 60 | variants: { 61 | extend: {}, 62 | }, 63 | plugins: [ 64 | require('@tailwindcss/forms'), 65 | require('@tailwindcss/typography'), 66 | require('@tailwindcss/aspect-ratio'), 67 | ], 68 | } 69 | -------------------------------------------------------------------------------- /layers/landing/components/landing/Header.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 54 | -------------------------------------------------------------------------------- /layers/blog/components/blog/PostItem.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 69 | -------------------------------------------------------------------------------- /layers/blog/pages/blog/posts/[id].vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 55 | -------------------------------------------------------------------------------- /layers/ui/components/Dropdown/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 72 | -------------------------------------------------------------------------------- /content/docs/1.components/4.menus.md: -------------------------------------------------------------------------------- 1 | # Menus 2 | 3 | Menus components. Based on Headless UI `Popover` component. Support multi level sub menus. 4 | 5 | ## Usage 6 | 7 | Use `` component to create menu. 8 | 9 | ::live-preview 10 | ::menus-basic 11 | :: 12 | :: 13 | 14 | ::code-block 15 | ```vue 16 | 57 | 58 | 65 | ``` 66 | :: 67 | 68 | ## Props 69 | 70 | | Prop | Type | Default Value | 71 | | ----------- | ------------------------- | ------------- | 72 | | `title` | `string` | `''` | 73 | | `to` | `string \| RouteLocation` | `''` | 74 | | `items` | `MenuItem[]` | `[]` | 75 | | `isChild` | `boolean` | `false` | 76 | | `placement` | `MenuPlacement` | `''` | 77 | 78 | ## Event 79 | 80 | None. 81 | 82 | ## Types 83 | 84 | ```ts 85 | export type MenuPlacement = 'top' | 'bottom' | 'left' | 'right' | 'bottom-right' | 'right-child' 86 | 87 | type MenuItem = InstanceType['$props'] 88 | ``` 89 | 90 | ## Sub Components 91 | 92 | - [MenusItem](/components/menus-item) 93 | 94 | -------------------------------------------------------------------------------- /layers/ui/components/Collapsible/Collapsible.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 93 | -------------------------------------------------------------------------------- /layers/auth/pages/auth/register.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 75 | -------------------------------------------------------------------------------- /layers/ui/components/Dropdown/Dropdown.stories.ts: -------------------------------------------------------------------------------- 1 | import type { Story } from '@storybook/vue3' 2 | import Dropdown from './Dropdown.vue' 3 | import DropdownItem from './DropdownItem.vue' 4 | import type { DropdownItemProps } from './types' 5 | 6 | const icons = ['calendar', 'attachment', 'download', 'clock', 'document'] 7 | 8 | const genItems = (length = 5): DropdownItemProps[] => 9 | Array.from({ length }, (_, v) => ({ 10 | text: `Item ${v + 1}`, 11 | icon: icons[Math.floor(Math.random() * icons.length)], 12 | })) 13 | 14 | const items = [...genItems(2), { divider: true }, ...genItems(3)] 15 | 16 | export default { 17 | title: 'Components/Dropdown', 18 | component: Dropdown, 19 | args: { 20 | modelValue: false, 21 | right: false, 22 | btnProps: { 23 | variant: 'secondary', 24 | }, 25 | label: 'Options', 26 | items, 27 | }, 28 | } 29 | 30 | const Template: Story = (args, { argTypes }) => ({ 31 | components: { Dropdown }, 32 | setup() { 33 | return { args, argTypes } 34 | }, 35 | template: ` 36 |
37 | 38 |
39 | `, 40 | }) 41 | 42 | export const Default = Template.bind({}) 43 | Default.args = {} 44 | 45 | export const Right = Template.bind({}) 46 | Right.args = { 47 | right: true, 48 | } 49 | 50 | export const RouterLink = Template.bind({}) 51 | RouterLink.args = { 52 | items: [ 53 | { 54 | text: 'Link 1', 55 | to: '/home', 56 | }, 57 | ], 58 | } 59 | 60 | export const Href = Template.bind({}) 61 | Href.args = { 62 | items: [ 63 | { 64 | text: 'Link 1', 65 | href: '/home', 66 | }, 67 | { 68 | text: 'Link 2', 69 | href: '/setting', 70 | newTab: true, 71 | }, 72 | ], 73 | } 74 | 75 | export const Slots: Story = (args, { argTypes }) => ({ 76 | components: { Dropdown, DropdownItem }, 77 | setup() { 78 | return { args, argTypes } 79 | }, 80 | template: ` 81 |
82 | 83 |
84 | 85 | 86 | 87 | 88 |
89 | 90 |
91 | `, 92 | }) 93 | -------------------------------------------------------------------------------- /app.config.ts: -------------------------------------------------------------------------------- 1 | import { ArrowPathIcon, CloudArrowUpIcon, FingerPrintIcon, LockClosedIcon } from '@heroicons/vue/24/outline' 2 | 3 | export default defineAppConfig({ 4 | title: 'Nuxt Tailwind Kit', 5 | description: 'Beautifully designed, fully featured, and ready to go starter kit for Nuxt 3 and Tailwind CSS.', 6 | features: [ 7 | { 8 | name: 'Nuxt 3', 9 | description: 10 | 'The latest and greatest version of Nuxt.js, with a new file system based routing system and a new way to write your components.', 11 | icon: CloudArrowUpIcon, 12 | }, 13 | { 14 | name: 'Tailwind CSS', 15 | description: 16 | 'A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.', 17 | icon: LockClosedIcon, 18 | }, 19 | { 20 | name: 'Headless UI', 21 | description: 22 | 'Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.', 23 | icon: ArrowPathIcon, 24 | }, 25 | { 26 | name: 'Built-in Components', 27 | description: 28 | 'A collection of UI components built with Tailwind CSS and Headless UI, ready to be used in your projects.', 29 | icon: FingerPrintIcon, 30 | }, 31 | ], 32 | feature: { 33 | title: 'Develop Faster', 34 | subtitle: 'Everything you need to create your app', 35 | description: 'Includes everything you need to build your app, including a customizable UI kit, authentication, and more.', 36 | image: 'https://tailwindui.com/img/component-images/dark-project-app-screenshot.png', 37 | }, 38 | announcement: { 39 | enabled: true, 40 | message: 'Nuxt Tailwind Kit is now available for Nuxt 3!', 41 | url: '/docs/getting-started/installation', 42 | }, 43 | cta: { 44 | title: 'Boost your productivity', 45 | description: 'Start building your next app with Nuxt Tailwind Kit today.', 46 | links: [ 47 | { 48 | title: 'Get Started', 49 | url: '/docs/getting-started/installation', 50 | type: 'primary', 51 | }, 52 | { 53 | title: 'Learn More', 54 | url: '/docs/getting-started/installation', 55 | type: 'alt', 56 | arrow: true, 57 | }, 58 | ], 59 | image: 'https://tailwindui.com/img/component-images/dark-project-app-screenshot.png', 60 | }, 61 | }) 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Tailwind Kit 2 | 3 | Nuxt 3 + Tailwind Starter Kit. 4 | 5 | ## Features 6 | 7 | - [Nuxt 3](https://v3.nuxtjs.org/) 8 | - [Nuxt Content v2](https://content.nuxtjs.org/) 9 | - [Tailwind CSS](https://tailwindcss.com/) 10 | - [Nuxt Icon](https://github.com/nuxt-modules/icon) 11 | - State management with [Pinia](https://pinia.vuejs.org/) 12 | - Easy form validation with [vee-validate](https://vee-validate.logaretm.com/v4/) 13 | - Custom authentication store via [`useAuthStore`](./stores/auth.ts) 14 | - Internationalization via [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) 15 | - Modular with [Nuxt Layer](https://nuxt.com/docs/getting-started/layers) 16 | 17 | ## Directory Structure 18 | 19 | ```bash 20 | . 21 | ├── apps # Nuxt Layer 22 | │ └── admin # Admin Panel 23 | │ └── auth # Authentication 24 | │ └── blog # Blog 25 | │ └── docs # Documentation 26 | │ └── landing # Landing Page 27 | │ └── store # Store 28 | ├── components # Global Components 29 | ├── content # Nuxt Content 30 | ├── layouts # Layouts 31 | ├── plugins # Plugins 32 | ├── stores # Stores 33 | ├── ui # UI Component Library 34 | ├── app.config.ts # Application Config 35 | ``` 36 | 37 | ## Try it Now 38 | 39 | ### Stackblitz 40 | 41 | - Try on [stackblitz](https://stackblitz.com/github/gravitano/nuxt3-tailwind-kit/tree/main) 42 | 43 | ### Online Demo 44 | 45 | - Try [online demo](https://nuxt3-tailwind-kit.vercel.app/) 46 | 47 | ### GitHub Template 48 | 49 | [Create a repo from this template on GitHub.](https://github.com/gravitano/nuxt3-tailwind-kit/generate) 50 | 51 | ### Local 52 | 53 | If you prefer to do it manually with the cleaner git history 54 | 55 | ```bash 56 | npx nuxi init -t gh:gravitano/nuxt3-tailwind-kit my-nuxt-app 57 | cd my-nuxt-app 58 | pnpm 59 | pnpm dev 60 | ``` 61 | 62 | ## Development 63 | 64 | We recommend to look at the [documentation](https://v3.nuxtjs.org). 65 | 66 | Make sure to install the dependencies 67 | 68 | ```bash 69 | pnpm install 70 | ``` 71 | 72 | Start the development server on http://localhost:3000 73 | 74 | ```bash 75 | pnpm dev 76 | ``` 77 | 78 | ## Production 79 | 80 | Build the application for production: 81 | 82 | ```bash 83 | pnpm build 84 | ``` 85 | 86 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment). 87 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "nuxi dev", 5 | "build": "nuxi build", 6 | "start": "node .output/server/index.mjs", 7 | "generate": "nuxt generate", 8 | "preview": "nuxt preview", 9 | "postinstall": "nuxt prepare", 10 | "storybook": "start-storybook -p 6006", 11 | "build-storybook": "build-storybook", 12 | "lint": "eslint .", 13 | "lint:fix": "eslint . --fix" 14 | }, 15 | "dependencies": { 16 | "@headlessui/vue": "^1.7.13", 17 | "@heroicons/vue": "^2.0.17", 18 | "@pinia/nuxt": "^0.4.8", 19 | "@vueuse/core": "^10.0.2", 20 | "highlight.js": "^11.7.0", 21 | "markdown-it": "^13.0.1", 22 | "markdown-it-prism": "^2.3.0", 23 | "pinia": "^2.0.34", 24 | "prism-themes": "^1.9.0", 25 | "tailwind-variants": "^0.1.2", 26 | "vee-validate": "^4.8.5", 27 | "vue": "^3.2.47", 28 | "vue-gtag": "^2.0.1", 29 | "windplus": "^0.0.2", 30 | "yup": "^0.32.11" 31 | }, 32 | "devDependencies": { 33 | "@antfu/eslint-config": "^0.38.4", 34 | "@babel/core": "^7.21.4", 35 | "@commitlint/cli": "^17.6.1", 36 | "@commitlint/config-conventional": "^17.6.1", 37 | "@iconify/json": "^2.2.50", 38 | "@nuxt/content": "^2.5.2", 39 | "@nuxt/icon": "^1.5.0", 40 | "@nuxtjs/fontaine": "^0.2.5", 41 | "@nuxtjs/google-fonts": "^3.0.0", 42 | "@nuxtjs/i18n": "8.0.0-beta.10", 43 | "@nuxtjs/tailwindcss": "^6.6.6", 44 | "@storybook/addon-actions": "^6.5.16", 45 | "@storybook/addon-essentials": "^6.5.16", 46 | "@storybook/addon-interactions": "^6.5.16", 47 | "@storybook/addon-links": "^6.5.16", 48 | "@storybook/builder-vite": "^0.4.2", 49 | "@storybook/testing-library": "^0.0.13", 50 | "@storybook/vue3": "^6.5.16", 51 | "@tailwindcss/aspect-ratio": "^0.4.2", 52 | "@tailwindcss/forms": "^0.5.3", 53 | "@tailwindcss/typography": "^0.5.9", 54 | "@vueuse/nuxt": "^10.0.2", 55 | "babel-loader": "^9.1.2", 56 | "eslint": "^8.38.0", 57 | "husky": "^8.0.3", 58 | "nuxt": "^3.17.5", 59 | "swiper": "^9.2.2", 60 | "tailwindcss": "^3.3.1", 61 | "vue-loader": "^17.0.1" 62 | }, 63 | "pnpm": { 64 | "overrides": { 65 | "consola": "^3.1.0" 66 | } 67 | }, 68 | "overrides": { 69 | "consola": "^3.1.0" 70 | }, 71 | "packageManager": "pnpm@9.12.2+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228" 72 | } 73 | -------------------------------------------------------------------------------- /layers/admin/components/admin/Header.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 86 | -------------------------------------------------------------------------------- /layers/ui/components/Button/Button.stories.ts: -------------------------------------------------------------------------------- 1 | import type { Story } from '@storybook/vue3' 2 | import { colors, variants } from '../../utils/buttons' 3 | import VButton from './Button.vue' 4 | 5 | const sizes = ['sm', 'md', 'lg'] 6 | 7 | export default { 8 | title: 'Components/Button', 9 | component: VButton, 10 | args: {}, 11 | } 12 | 13 | const Template: Story = (args, { argTypes }) => ({ 14 | components: { VButton }, 15 | setup() { 16 | return { args, argTypes, variants } 17 | }, 18 | template: ` 19 | 20 | Button 21 | 22 | `, 23 | }) 24 | 25 | export const Default = Template.bind({}) 26 | Default.args = {} 27 | 28 | export const Colors: Story = (args, { argTypes }) => ({ 29 | components: { VButton }, 30 | setup() { 31 | return { args, argTypes, colors } 32 | }, 33 | template: ` 34 |
35 | 36 | {{ color }} 37 | 38 |
39 | `, 40 | }) 41 | 42 | export const Variants: Story = (args, { argTypes }) => ({ 43 | components: { VButton }, 44 | setup() { 45 | return { args, argTypes, variants } 46 | }, 47 | template: ` 48 |
49 | 50 | {{ variant }} 51 | 52 |
53 | `, 54 | }) 55 | 56 | export const Sizes: Story = (args, { argTypes }) => ({ 57 | components: { VButton }, 58 | setup() { 59 | return { args, argTypes, sizes } 60 | }, 61 | template: ` 62 |
63 | 64 | button: {{ size }} 65 | 66 |
67 | `, 68 | }) 69 | 70 | export const Icon: Story = (args, { argTypes }) => ({ 71 | components: { VButton }, 72 | setup() { 73 | return { args, argTypes, sizes } 74 | }, 75 | template: ` 76 | 77 | 83 | 86 | 87 | 88 | `, 89 | }) 90 | -------------------------------------------------------------------------------- /layers/store/components/Store/Collection.vue: -------------------------------------------------------------------------------- 1 | 15 | 40 | 41 | 69 | -------------------------------------------------------------------------------- /layers/store/components/Store/TechnicalSpecs.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 43 | -------------------------------------------------------------------------------- /layers/landing/components/landing/Cta.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 50 | -------------------------------------------------------------------------------- /layers/landing/components/landing/Hero.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 42 | -------------------------------------------------------------------------------- /layers/docs/pages/docs/swiper.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 97 | -------------------------------------------------------------------------------- /content/docs/1.components/0.autocomplete.md: -------------------------------------------------------------------------------- 1 | --- 2 | navigation: 3 | title: Autocomplete 4 | --- 5 | 6 | # Autocomplete 7 | 8 | Autocomplete component based on Headless UI `Combobox`. Support multiple selection. 9 | 10 | ## Usage 11 | 12 | Use `` component to create autocomplete input. 13 | 14 | ::live-preview 15 | ::autocomplete-basic 16 | :: 17 | :: 18 | 19 | ::code-block 20 | 21 | ```vue 22 | 34 | 35 | 42 | ``` 43 | 44 | :: 45 | 46 | ## Multiple 47 | 48 | Use `multiple` prop to enable multiple selection to the autocomplete component. 49 | 50 | ::live-preview 51 | ::autocomplete-multiple 52 | :: 53 | :: 54 | 55 | ::code-block 56 | 57 | ```vue 58 | 70 | 71 | 79 | ``` 80 | 81 | :: 82 | 83 | ## Props 84 | 85 | | Prop | Type | Default Value | 86 | | ------------- | ------------------------------------- | ------------- | 87 | | `modelValue` | `Item \| Item[] \| undefined \| null` | `undefined` | 88 | | `multiple` | `string` | `false` | 89 | | `placeholder` | `string` | `''` | 90 | | `items` | `string` | `[]` | 91 | | `itemText` | `string` | `'text'` | 92 | | `itemValue` | `string` | `'value'` | 93 | 94 | ## Events 95 | 96 | | Name | Payload | Description | 97 | | ------------------- | ----------- | ---------------------------------------- | 98 | | `update:modelValue` | `{value: ModelValue \| ModelValue[]}` | Triggered when `modelValue` prop changed | 99 | 100 | ## Types 101 | 102 | ```ts 103 | interface Item extends Record { 104 | value: string | number 105 | text: string 106 | } 107 | 108 | type ModelValue = Item | Item[] | undefined | null 109 | ``` 110 | -------------------------------------------------------------------------------- /layers/landing/components/landing/MobileNav.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 73 | -------------------------------------------------------------------------------- /layers/ui/components/Modal/Modal.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 111 | -------------------------------------------------------------------------------- /layers/landing/components/landing/Features.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 95 | -------------------------------------------------------------------------------- /layers/ui/components/Menus/Menus.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 84 | -------------------------------------------------------------------------------- /content/docs/1.components/6.select.md: -------------------------------------------------------------------------------- 1 | # Select 2 | 3 | Select component based on Headless UI `Listbox`. Support multiple selection. 4 | 5 | ## Usage 6 | 7 | Use `` component to create select input. 8 | 9 | ::live-preview 10 | ::select-basic 11 | :: 12 | 13 | ::code-block 14 | 15 | ```vue 16 | 28 | 29 | 36 | ``` 37 | 38 | :: 39 | 40 | ## Multiple 41 | 42 | Use `multiple` prop to enable multiple selection to the select component. 43 | 44 | ::live-preview 45 | ::select-multiple 46 | :: 47 | 48 | ::code-block 49 | 50 | ```vue 51 | 63 | 64 | 72 | ``` 73 | 74 | :: 75 | 76 | ## Props 77 | 78 | | Property | Type | Required | Default | Description | 79 | | --------------- |-----------------| -------- | ---------- |----------------------------------------------------------------------------------| 80 | | `modelValue` | `VSelectItem` | Yes | - | The selected item in the dropdown list. | 81 | | `items` | `VSelectItem[]` | Yes | `[]` | An array of `VSelectItem` objects to display in the dropdown list. | 82 | | `placeholder` | `string` | No | `'Choose'` | The placeholder text to display when no item is selected. | 83 | | `hideCheckIcon` | `boolean` | No | `false` | Specifies whether to hide the check icon when an item is selected. | 84 | | `outlined` | `boolean` | No | `false` | Specifies whether the dropdown list should be displayed with an outlined border. | 85 | | `large` | `boolean` | No | `false` | Specifies whether the dropdown list should be displayed with a large size. | 86 | | `small` | `boolean` | No | `false` | Specifies whether the dropdown list should be displayed with a small size. | 87 | 88 | ## Events 89 | 90 | | Name | Payload | Description | 91 | | ------------------- |------------------------| ---------------------------------------- | 92 | | `update:modelValue` | `{value: VSelectItem}` | Triggered when `modelValue` prop changed | 93 | 94 | ## Types 95 | 96 | ```ts 97 | export type VSelectItem = { 98 | text: string; 99 | value: string | number; 100 | divider?: boolean; 101 | }; 102 | ``` 103 | -------------------------------------------------------------------------------- /layers/admin/components/admin/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 81 | 82 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /layers/auth/pages/auth/login.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 122 | -------------------------------------------------------------------------------- /layers/store/components/Store/Hero.vue: -------------------------------------------------------------------------------- 1 | 59 | -------------------------------------------------------------------------------- /content/docs/1.components/1.dropdown.md: -------------------------------------------------------------------------------- 1 | # Dropdown 2 | 3 | Dropdown component based on Headless UI `Menu`. 4 | 5 | ## Basic Usage 6 | 7 | Use `` component to create dropdown and `` component to add dropdown item. 8 | 9 | ::live-preview 10 | ::dropdown-basic 11 | :: 12 | 13 | ::code-block 14 | 15 | ```vue 16 | 26 | ``` 27 | 28 | :: 29 | 30 | ## Label 31 | 32 | Use `label` prop to change the default label text. 33 | 34 | ::live-preview 35 | ::dropdown-label 36 | :: 37 | 38 | ::code-block 39 | 40 | ```vue 41 | 51 | ``` 52 | 53 | :: 54 | 55 | ## Right Placement 56 | 57 | Use `right` prop to place the dropdown to the right. 58 | 59 | ::live-preview 60 | ::dropdown-right 61 | :: 62 | 63 | ::code-block 64 | 65 | ```vue 66 | 76 | ``` 77 | 78 | :: 79 | 80 | ## Icon 81 | 82 | Use `icon` to the `` component to add prefix icon. 83 | 84 | ::live-preview 85 | ::dropdown-icon 86 | :: 87 | 88 | ::code-block 89 | 90 | ```vue 91 | 105 | ``` 106 | 107 | 108 | :: 109 | 110 | ## Custom Activator 111 | 112 | Use `` component to create custom dropdown activator. You can also render it as another component like `Button` via `as` prop. 113 | 114 | ::live-preview 115 | ::dropdown-custom-activator 116 | :: 117 | 118 | ::code-block 119 | 120 | ```vue 121 | 124 | 125 | 140 | ``` 141 | 142 | :: 143 | 144 | ## Props 145 | 146 | | Prop | Type | Default | Description | 147 | | ---- | ---- | ------- | ----------- | 148 | | modelValue | `boolean` | `false` | The value of the model. | 149 | | btnProps | `Record` | `{ variant: 'secondary' }` | Props for the button component. | 150 | | label | `string` | `'Options'` | The label for the button component. | 151 | | right | `boolean` | `false` | Specifies whether to align the dropdown to the right. | 152 | | items | `VDropdownItemProps[]` | `[]` | An array of items to display in the dropdown. | 153 | 154 | ## Events 155 | 156 | None. 157 | 158 | ## Slots 159 | 160 | ### activator 161 | 162 | The `activator` slot allows you to customize the activator component that triggers the dropdown. The activator component is typically a button or an icon, and is used to open and close the dropdown. 163 | 164 | By using the `activator` slot, you have complete control over the appearance and behavior of the activator component. You can use any valid Vue component, including custom components, as the activator. 165 | 166 | Here's an example of how to use the `activator` slot: 167 | 168 | ```vue 169 | 178 | ``` 179 | 180 | ## Types 181 | 182 | ```ts 183 | export interface VDropdownProps { 184 | modelValue: boolean 185 | btnProps: any 186 | label: string 187 | right: boolean 188 | items?: VDropdownItemProps[] 189 | } 190 | 191 | export interface VDropdownItemProps { 192 | text: string 193 | to?: string 194 | href?: string 195 | icon?: string 196 | newTab?: boolean 197 | } 198 | ``` 199 | -------------------------------------------------------------------------------- /layers/ui/components/Select/Select.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 169 | -------------------------------------------------------------------------------- /layers/ui/components/Autocomplete/Autocomplete.vue: -------------------------------------------------------------------------------- 1 | 81 | 82 | 170 | -------------------------------------------------------------------------------- /layers/ui/components/Button/Button.vue: -------------------------------------------------------------------------------- 1 | 179 | 180 | 194 | -------------------------------------------------------------------------------- /content/docs/1.components/0.button.md: -------------------------------------------------------------------------------- 1 | --- 2 | navigation: 3 | title: Button 4 | --- 5 | 6 | # Button 7 | 8 | Button component. 9 | 10 | ## Usage 11 | 12 | Use `` to create button component. 13 | 14 | ::live-preview 15 | ::button-basic 16 | :: 17 | 18 | ::code-block 19 | 20 | ```vue 21 | 24 | ``` 25 | 26 | :: 27 | 28 | ## Colors 29 | 30 | Use `color` prop to change button color. 31 | 32 | ::live-preview 33 | :button-colors 34 | :: 35 | 36 | ::code-block 37 | 38 | ```vue 39 | 62 | ``` 63 | :: 64 | 65 | ## Disabled 66 | 67 | Use `disabled` prop to make button disabled. 68 | 69 | ::live-preview 70 | :button-disabled 71 | :: 72 | 73 | ::code-block 74 | 75 | ```vue 76 | 99 | ``` 100 | 101 | :: 102 | 103 | ## Size 104 | 105 | Use `size` prop to change button size. 106 | 107 | ::live-preview 108 | :button-sizes 109 | :: 110 | 111 | ::code-block 112 | 113 | ```vue 114 | 125 | ``` 126 | 127 | :: 128 | 129 | ## Variant 130 | 131 | Use `variant` prop to change button style. 132 | 133 | ::live-preview 134 | ::button-variants 135 | :: 136 | :: 137 | 138 | ::code-block 139 | 140 | ```vue 141 | 153 | ``` 154 | 155 | :: 156 | ## Icons 157 | 158 | Use `` component to add icon to the button. 159 | 160 | ::live-preview 161 | ::button-icons 162 | :: 163 | 164 | ::code-block 165 | 166 | ```vue 167 | 179 | ``` 180 | 181 | :: 182 | 183 | ## Rounded 184 | 185 | Use `rounded` prop to make button rounded shape. 186 | 187 | ::live-preview 188 | ::button-rounded 189 | :: 190 | 191 | ::code-block 192 | 193 | ```vue 194 | 206 | ``` 207 | 208 | :: 209 | 210 | ## Shadow 211 | 212 | Use `shadow` prop to add shadow to the button. 213 | 214 | ::live-preview 215 | ::button-shadow 216 | :: 217 | 218 | ::code-block 219 | 220 | ```vue 221 | 242 | ``` 243 | 244 | :: 245 | 246 | ## Block 247 | 248 | Use `block` prop to make button full width. 249 | 250 | ::live-preview 251 | ::button-block 252 | :: 253 | 254 | ::code-block 255 | 256 | ```vue 257 | 265 | ``` 266 | 267 | :: 268 | 269 | ## Props 270 | 271 | | Prop Name | Type | Accepted Values | Default Value | Description | 272 | | --- | --- | --- | --- | --- | 273 | | `type` | `String` | - | `undefined` | Specifies the type of the button. | 274 | | `color` | `String` | `'primary'`, `'secondary'`, `'warning'`, `'error'`, `'success'`, `'light'`, `'dark'` | `'light'` | Specifies the color scheme of the button. | 275 | | `rounded` | `Boolean` | - | `false` | Whether to apply rounded corners to the button. | 276 | | `variant` | `String` | `'primary'`, `'tertiary'`, `'ghost'` | `'primary'` | Specifies the variant of the button. | 277 | | `block` | `Boolean` | - | `false` | Whether the button should take up the full width of its container. | 278 | | `to` | `[String, Object]` | - | `undefined` | The target route of the button. If provided, the button will be rendered as a `nuxt-link`. | 279 | | `href` | `String` | - | `undefined` | The URL to link to if the button is not using a `nuxt-link`. | 280 | | `size` | `String` | `'sm'`, `'md'`, `'lg'` | `'md'` | Specifies the size of the button. | 281 | | `shadow` | `[Boolean, String]` | `true`, `false`, `'sm'`, `'md'`, `'lg'`, `'xl'` | `false` | Whether to apply a shadow to the button, and the size of 282 | 283 | 284 | ## Events 285 | 286 | No custom events. 287 | -------------------------------------------------------------------------------- /content/docs/1.components/5.modal.md: -------------------------------------------------------------------------------- 1 | # Modal 2 | 3 | Modal component based on Headless UI `Dialog` component. 4 | 5 | ## Usage 6 | 7 | Use `` component to modal/dialog. 8 | 9 | ::live-preview 10 | ::modal-basic 11 | :: 12 | 13 | ::code-block 14 | 15 | ```vue 16 | 19 | 20 | 32 | ``` 33 | 34 | :: 35 | 36 | ## With Header 37 | 38 | Use `` to add header to the modal. 39 | 40 | ::live-preview 41 | ::modal-with-header 42 | :: 43 | 44 | ::code-block 45 | 46 | ```vue 47 | 83 | 84 | 99 | ``` 100 | 101 | :: 102 | 103 | ## With Footer 104 | 105 | Use `` to add footer to the modal. 106 | 107 | ::live-preview 108 | ::modal-with-footer 109 | :: 110 | 111 | ::code-block 112 | 113 | ```vue 114 | 117 | 118 | 138 | ``` 139 | 140 | :: 141 | 142 | ## Persistent 143 | 144 | Use `persistent` to make modal persistent. 145 | 146 | ::live-preview 147 | ::modal-persistent 148 | :: 149 | 150 | ::code-block 151 | 152 | ```vue 153 | 156 | 157 | 173 | ``` 174 | 175 | :: 176 | 177 | ## Fullscreen 178 | 179 | Use `fullscreen` to make modal fullscreen. 180 | 181 | ::live-preview 182 | ::modal-fullscreen 183 | :: 184 | 185 | ::code-block 186 | 187 | ```vue 188 | 191 | 192 | 208 | ``` 209 | 210 | :: 211 | 212 | ## Props 213 | 214 | | Prop Name | Type | Default Value | Description | 215 | | ------------ | --------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 216 | | `modelValue` | `Boolean` | `false` | Sets the visibility of the modal. When `modelValue` is set to `true`, the modal is visible, and when it's set to `false`, the modal is hidden. | 217 | | `persistent` | `Boolean` | `false` | Determines whether the modal should persist even when the user clicks outside the modal. By default, the modal will close when the user clicks outside of it. Setting this prop to `true` will prevent that behavior. | 218 | | `fullscreen` | `Boolean` | `false` | Make modal fullscreen | 219 | 220 | ## Events 221 | 222 | | Name | Payload | Description | 223 | | ------------------- | --------------------- | ---------------------------------------- | 224 | | `update:modelValue` | `{value: boolean}` | Triggered when `modelValue` prop changed | 225 | 226 | ## Slots 227 | 228 | | Name | Payload | Description | 229 | | ------------------- | --------------------- | ---------------------------------------- | 230 | | `default` | None | The default Vue slot. | 231 | 232 | ## Sub Components 233 | 234 | - `` 235 | - `` 236 | - `` 237 | --------------------------------------------------------------------------------