├── .env ├── .env.dev ├── .env.prod ├── .eslintrc.cjs ├── .github └── workflows │ ├── codeql.yml │ ├── nuxtjs.yml │ └── vercel.yml ├── .gitignore ├── .husky └── commit-msg ├── .storybook ├── main.js ├── preview-head.html ├── preview.js └── tailwind.css ├── .vscode └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── README.zh-CN.md ├── app.vue ├── assets └── css │ └── tailwind.css ├── commitlint.config.js ├── components ├── App │ ├── Footer.vue │ ├── Header.vue │ └── LangSwitcher.vue ├── Button │ ├── Button.stories.ts │ └── Button.vue ├── Contact │ └── Form.vue ├── Dashboard │ ├── Header.vue │ ├── Sidebar.vue │ ├── SidebarItem.vue │ ├── SidebarLink.vue │ └── Stats │ │ └── Item.vue ├── Form │ ├── Input.vue │ └── Switch.vue ├── HeroSection │ └── HeroSection.vue ├── Home │ ├── About.vue │ ├── Features.vue │ └── Quote.vue ├── PageHeader │ └── PageHeader.vue ├── SectionHeader.vue ├── UI │ ├── Autocomplete │ │ ├── Autocomplete.stories.ts │ │ └── Autocomplete.vue │ ├── Card │ │ ├── Card.vue │ │ ├── CardBody.vue │ │ ├── CardFooter.vue │ │ └── CardHeader.vue │ ├── Collapsible │ │ ├── CollapseTransition.vue │ │ ├── Collapsible.stories.ts │ │ ├── Collapsible.vue │ │ ├── CollapsibleGroup.stories.ts │ │ └── CollapsibleGroup.vue │ ├── Dropdown │ │ ├── Dropdown.stories.ts │ │ ├── Dropdown.vue │ │ ├── DropdownButton.vue │ │ ├── DropdownItem.vue │ │ └── types.d.ts │ ├── Modal │ │ ├── Backdrop.vue │ │ └── Modal.vue │ ├── NavDrawer │ │ └── NavDrawer.vue │ └── Select │ │ ├── Select.stories.ts │ │ ├── Select.vue │ │ └── types.d.ts └── blog │ ├── PostImage.vue │ └── PostItem.vue ├── composables ├── auth.ts ├── states.ts └── strapi.ts ├── content ├── articles │ ├── base.md │ ├── index.md │ └── nuxt-template.md └── wind │ └── index.md ├── layouts ├── auth.vue ├── dashboard.vue └── default.vue ├── middleware ├── auth.ts └── guest.ts ├── nuxt.config.ts ├── package.json ├── pages ├── 401.vue ├── 403.vue ├── auth │ ├── forgot-password.vue │ ├── login.vue │ ├── register.vue │ └── reset-password.vue ├── blog │ └── index.vue ├── counter.vue ├── dashboard │ └── index.vue ├── forms.vue ├── index.vue ├── playground │ └── index.vue ├── store │ ├── [slug].vue │ └── index.vue └── swiper.vue ├── plugins └── gtag.client.ts ├── pnpm-lock.yaml ├── postcss.config.js ├── prettier.config.js ├── public └── images │ └── login-illustration.svg ├── server └── api │ ├── auth │ └── login.post.ts │ ├── home.get.ts │ └── store │ └── products.get.ts ├── stores ├── auth.ts └── counter.ts ├── stub └── types__react │ ├── index.d.ts │ └── package.json ├── tailwind.config.js ├── tsconfig.json └── types └── index.ts /.env: -------------------------------------------------------------------------------- 1 | STRAPI_URL=https://bapi.warsono.id 2 | NUXT_PUBLIC_GA_ID=G-0XXRF7JV2H -------------------------------------------------------------------------------- /.env.dev: -------------------------------------------------------------------------------- 1 | STRAPI_URL=http://localhost:1337 2 | NUXT_PUBLIC_GA_ID=G-VALUE -------------------------------------------------------------------------------- /.env.prod: -------------------------------------------------------------------------------- 1 | STRAPI_URL=http://localhost:1337 2 | NUXT_PUBLIC_GA_ID=G-VALUE -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: '@antfu', 3 | rules: { 4 | 'vue/custom-event-name-casing': [ 5 | 'off', 6 | 'camelCase' || 'kebab-case', 7 | { 8 | ignores: [], 9 | }, 10 | ], 11 | 'vue/v-on-event-hyphenation': [ 12 | 'off', { 13 | autofix: true, 14 | ignore: [], 15 | }, 16 | ], 17 | 'no-console': 'off', 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ "main" ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ "main" ] 20 | schedule: 21 | - cron: '45 23 * * 4' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v3 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v2 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | 52 | # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs 53 | # queries: security-extended,security-and-quality 54 | 55 | 56 | # Autobuild attempts to build any compiled languages (C/C++, C#, Go, or Java). 57 | # If this step fails, then you should remove it and run the build manually (see below) 58 | - name: Autobuild 59 | uses: github/codeql-action/autobuild@v2 60 | 61 | # ℹ️ Command-line programs to run using the OS shell. 62 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 63 | 64 | # If the Autobuild fails above, remove it and uncomment the following three lines. 65 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. 66 | 67 | # - run: | 68 | # echo "Run, Build Application using script" 69 | # ./location_of_script_within_repo/buildscript.sh 70 | 71 | - name: Perform CodeQL Analysis 72 | uses: github/codeql-action/analyze@v2 73 | with: 74 | category: "/language:${{matrix.language}}" 75 | -------------------------------------------------------------------------------- /.github/workflows/nuxtjs.yml: -------------------------------------------------------------------------------- 1 | # Sample workflow for building and deploying a Nuxt site to GitHub Pages 2 | # 3 | # To get started with Nuxt see: https://nuxtjs.org/docs/get-started/installation 4 | # 5 | name: Deploy Nuxt site to Pages 6 | 7 | on: 8 | # Runs on pushes targeting the default branch 9 | push: 10 | branches: [main] 11 | 12 | # Allows you to run this workflow manually from the Actions tab 13 | # workflow_dispatch: 14 | 15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 16 | permissions: 17 | contents: read 18 | pages: write 19 | id-token: write 20 | 21 | # Allow one concurrent deployment 22 | concurrency: 23 | group: pages 24 | cancel-in-progress: true 25 | 26 | jobs: 27 | # Build job 28 | build: 29 | runs-on: ubuntu-latest 30 | steps: 31 | - name: Checkout 32 | uses: actions/checkout@v3 33 | 34 | - name: Detect package manager 35 | id: detect-package-manager 36 | run: | 37 | if [ -f "${{ github.workspace }}/package.json" ]; then 38 | echo "manager=npm" >> $GITHUB_OUTPUT 39 | echo "command=install" >> $GITHUB_OUTPUT 40 | exit 0 41 | elif [ -f "${{ github.workspace }}/package.json" ]; then 42 | echo "manager=npm" >> $GITHUB_OUTPUT 43 | echo "command=ci" >> $GITHUB_OUTPUT 44 | exit 0 45 | else 46 | echo "Unable to determine packager manager" 47 | exit 1 48 | fi 49 | - name: Setup Node 50 | uses: actions/setup-node@v3 51 | with: 52 | node-version: '18' 53 | cache: ${{ steps.detect-package-manager.outputs.manager }} 54 | - name: Setup Pages 55 | uses: actions/configure-pages@v2 56 | with: 57 | # Automatically inject router.base in your Nuxt configuration file and set 58 | # target to static (https://nuxtjs.org/docs/configuration-glossary/configuration-target/). 59 | # 60 | # You may remove this line if you want to manage the configuration yourself. 61 | static_site_generator: nuxt 62 | - name: Restore cache 63 | uses: actions/cache@v3 64 | with: 65 | path: | 66 | dist 67 | .nuxt 68 | key: ${{ runner.os }}-nuxt-build-${{ hashFiles('dist') }} 69 | restore-keys: | 70 | ${{ runner.os }}-nuxt-build- 71 | - name: Install dependencies 72 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} 73 | - name: Static HTML export with Nuxt 74 | run: ${{ steps.detect-package-manager.outputs.manager }} run generate 75 | - name: Upload artifact 76 | uses: actions/upload-pages-artifact@v1 77 | with: 78 | path: ./dist 79 | 80 | # Deployment job 81 | deploy: 82 | environment: 83 | name: github-pages 84 | url: ${{ steps.deployment.outputs.page_url }} 85 | runs-on: ubuntu-latest 86 | needs: build 87 | steps: 88 | - name: Deploy to GitHub Pages 89 | id: deployment 90 | uses: actions/deploy-pages@v1 91 | -------------------------------------------------------------------------------- /.github/workflows/vercel.yml: -------------------------------------------------------------------------------- 1 | name: deploy website to vercel 2 | on: 3 | # Runs on pushes targeting the default branch 4 | push: 5 | branches: [main] 6 | jobs: 7 | deploy: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v2 11 | # your build commands 12 | # - run: | 13 | # ng build --prod 14 | - uses: amondnet/vercel-action@v20 # deploy 15 | with: 16 | vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required 17 | github-token: ${{ secrets.GITHUB_TOKEN }} # Optional 18 | vercel-args: --prod # Optional 19 | vercel-org-id: ${{ secrets.ORG_ID}} # Required 20 | vercel-project-id: ${{ secrets.PROJECT_ID}} # Required 21 | working-directory: . 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | 4 | nuxt.d.ts 5 | .output 6 | .DS_Store### Node template 7 | # Logs 8 | logs 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # Snowpack dependency directory (https://snowpack.dev/) 50 | web_modules/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | .env.test 79 | 80 | # parcel-bundler cache (https://parceljs.org/) 81 | .cache 82 | .parcel-cache 83 | 84 | # Next.js build output 85 | .next 86 | out 87 | 88 | # Nuxt.js build / generate output 89 | .nuxt 90 | dist 91 | 92 | # Gatsby files 93 | .cache/ 94 | # Comment in the public line in if your project uses Gatsby and not Next.js 95 | # https://nextjs.org/blog/next-9-1#public-directory-support 96 | # public 97 | 98 | # vuepress build output 99 | .vuepress/dist 100 | 101 | # Serverless directories 102 | .serverless/ 103 | 104 | # FuseBox cache 105 | .fusebox/ 106 | 107 | # DynamoDB Local files 108 | .dynamodb/ 109 | 110 | # TernJS port file 111 | .tern-port 112 | 113 | # Stores VSCode versions used for testing VSCode extensions 114 | .vscode-test 115 | 116 | # yarn v2 117 | .yarn/cache 118 | .yarn/unplugged 119 | .yarn/build-state.yml 120 | .yarn/install-state.gz 121 | .pnp.* 122 | 123 | .idea/ 124 | .vercel 125 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit "${1}" 5 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const { mergeConfig } = require('vite'); 2 | const Icons = require('unplugin-icons/vite'); 3 | 4 | module.exports = { 5 | stories: [ 6 | '../components/**/*.stories.mdx', 7 | '../components/**/*.stories.@(js|jsx|ts|tsx)', 8 | ], 9 | addons: [ 10 | '@storybook/addon-links', 11 | '@storybook/addon-essentials', 12 | '@storybook/addon-interactions', 13 | ], 14 | framework: '@storybook/vue3', 15 | core: { 16 | builder: '@storybook/builder-vite', 17 | }, 18 | features: { 19 | storyStoreV7: true, 20 | }, 21 | async viteFinal(config, { configType }) { 22 | return mergeConfig(config, { 23 | plugins: [ 24 | Icons({ 25 | /* options */ 26 | }), 27 | ], 28 | }); 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.storybook/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.enable": false, 3 | "editor.formatOnSave": false, 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll.eslint": true 6 | }, 7 | "i18n-ally.localesPaths": [ 8 | "locales" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # (2022-12-01) 2 | 3 | 4 | ### Features 5 | 6 | * **添加vecel部署:** 添加一键从本地部署到vecel功能 ([187b3f1](https://github.com/Createitv/nuxt3-tailwind-start/commit/187b3f17a277a730e0f33f1aba79de0d6c371afb)) 7 | * **template模板渲染修改:** 修改Nuxt3模板 提交commitlint-cb ([7dfe1f4](https://github.com/Createitv/nuxt3-tailwind-start/commit/7dfe1f41d91ba78711d1359b9de36eef101f0ba5)) 8 | 9 | 10 | ### BREAKING CHANGES 11 | 12 | * **添加vecel部署:** deploy to cercel 13 | 14 | 15 | 16 | # (2022-12-01) 17 | 18 | 19 | ### Features 20 | 21 | * **template模板渲染修改:** 修改Nuxt3模板 提交commitlint-cb ([7dfe1f4](https://github.com/Createitv/nuxt3-tailwind-start/commit/7dfe1f41d91ba78711d1359b9de36eef101f0ba5)) 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 everyone. 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Nuxt 3 Tailwind Starter [中文文档](./README.zh-CN.md) 3 | [![Nuxt3 Tailwind Starter](https://img.shields.io/badge/Nuxt3%20Tailwind%20Starter-1.0.0-blue)]() 4 | [![Nuxt3](https://img.shields.io/badge/Nuxt3-3.0.0-blue)]() 5 | [![Nuxt Content v2](https://img.shields.io/badge/Nuxt%20Content-v2.0.1-blue)]() 6 | [![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.1.8-blue)]() 7 | [![Nuxt Icon](https://img.shields.io/badge/Nuxt%20Icon-0.1.5-blue)]() 8 | [![Pinia](https://img.shields.io/badge/Pinia-2.0.24-blue)]() 9 | [![vee-validate](https://img.shields.io/badge/vee--validate-4.5.4-blue)]() 10 | [![i18n](https://img.shields.io/badge/i18n-9.2.2-blue)]() 11 | [![vercel](https://img.shields.io/badge/vercel-28.5.6-blue)]() 12 | [![pnpm](https://img.shields.io/badge/pnpm--7.17.0-blue)]() 13 | 14 | Zero Config Nuxt 3 + Tailwind Starter 15 | ## Features 16 | - [Nuxt 3](https://v3.nuxtjs.org/) 17 | - [Nuxt Content v2](https://content.nuxtjs.org/) 18 | - [Tailwind CSS](https://tailwindcss.com/) 19 | - [Nuxt Icon](https://github.com/nuxt-modules/icon) 20 | - State management with [Pinia](https://pinia.vuejs.org/) 21 | - Easy form validation with [vee-validate](https://vee-validate.logaretm.com/v4/) 22 | - Custom authentication store via [`useAuthStore`](./stores/auth.ts) 23 | - Internalization via [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) 24 | - `Tailwind CSS` Auto prettier 25 | - Comitlint and auto generate CHANGELOG.md 26 | - Auto push to [`vercel`](https://vercel.com/) `Github Page`on main branch 27 | - Devops Easy 28 | ## Try it Now 29 | 30 | ### Stackblitz 31 | 32 | - Try on [stackblitz](https://stackblitz.com/github/Createitv/nuxt3-tailwind-starter/tree/main) 33 | 34 | ### Online Demo 35 | 36 | - Try [online demo](https://nuxt3-tailwind-start.vercel.app/) 37 | 38 | ### GitHub Template 39 | 40 | [Create a repo from this template on GitHub.](https://github.com/Createitv/nuxt3-tailwind-starter/generate) 41 | 42 | ### Local Install 43 | 44 | If you prefer to do it manually with the cleaner git history 45 | 46 | ```bash 47 | git clone https://github.com/Createitv/nuxt3-tailwind-starter my-app 48 | cd my-app 49 | pnpm install --shamefully-hoist 50 | # or 51 | npm install 52 | ``` 53 | 54 | ## Development 55 | 56 | We recommend to look at the [documentation](https://v3.nuxtjs.org). 57 | 58 | Make sure to install the dependencies 59 | 60 | ```bash 61 | npm run dev 62 | ``` 63 | 64 | Start the development server on http://localhost:3000 65 | 66 | ## Production 67 | 68 | Build the application for production: 69 | 70 | ```bash 71 | npm run build 72 | ``` 73 | 74 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment). 75 | 76 | ### Thanks 77 | 78 | [Warsono](https://github.com/gravitano/nuxt3-tailwind-kit) 79 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Tailwind Starter 2 | 3 | [![Nuxt3 Tailwind Starter](https://img.shields.io/badge/Nuxt3%20Tailwind%20Starter-1.0.0-blue)]() 4 | [![Nuxt3](https://img.shields.io/badge/Nuxt3-3.0.0-blue)]() 5 | [![Nuxt Content v2](https://img.shields.io/badge/Nuxt%20Content-v2.0.1-blue)]() 6 | [![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.1.8-blue)]() 7 | [![Nuxt Icon](https://img.shields.io/badge/Nuxt%20Icon-0.1.5-blue)]() 8 | [![Pinia](https://img.shields.io/badge/Pinia-2.0.24-blue)]() 9 | [![vee-validate](https://img.shields.io/badge/vee--validate-4.5.4-blue)]() 10 | [![i18n](https://img.shields.io/badge/i18n-9.2.2-blue)]() 11 | [![vercel](https://img.shields.io/badge/vercel-28.5.6-blue)]() 12 | [![pnpm](https://img.shields.io/badge/pnpm--7.17.0-blue)]() 13 | 14 | Zero Config Nuxt 3 + Tailwind Starter 15 | 16 | ### 在线编辑 17 | 18 | - Try on [stackblitz](https://stackblitz.com/github/Createitv/nuxt3-tailwind-starter/tree/main) 19 | 20 | ### 在线演示 21 | 22 | - Try [online demo](https://nuxt3-tailwind-start.vercel.app/) 23 | 24 | ### 模板 25 | 26 | [直接使用此模板](https://github.com/Createitv/nuxt3-tailwind-starter/generate) 27 | 28 | ## 功能支持 29 | 30 | - [Nuxt 3](https://v3.nuxtjs.org/) 31 | - [Nuxt Content v2](https://content.nuxtjs.org/) 32 | - [Tailwind CSS](https://tailwindcss.com/) 33 | - [Nuxt Icon](https://nuxt.com/modules/icon) 34 | - [Pinia](https://pinia.vuejs.org/) 35 | - [vee-validate](https://vee-validate.logaretm.com/v4/) 36 | - `useAuthStore`登录验证 37 | - [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) 38 | 39 | ### 其他 40 | - 🎨 使用Tailwind作为CSS组件库 41 | - 💪 Eslint和Stylelint代码检验； 42 | - 🐶 创建Git commit message cn规范校验； 43 | - 🎉 天然支持Vue3、Typescript、Vite等； 44 | - 🍍 集成Pinia作为状态管理； 45 | - 🥤 集成vueuse作为Hooks库； 46 | - 🎊文件式路由、componentsAPI自动导入、组件自动导入等； 47 | - 🎁 集成Nuxt Content作为Markdown文件管理； 48 | - 🎁 集成Nuxt Icon作为SVG图标管理； 49 | - 🎁 集成Nuxt I18n作为国际化管理； 50 | - 🎁 集成Vee-Validate作为表单验证； 51 | - 🎁 集成Vercel作为自动部署； 52 | - 🎁 集成Pnpm作为包管理工具； 53 | - 🎁 集成Github Action作为CI/CD； 54 | - 🎁 集成Prettier作为代码格式化工具； 55 | - 🎁 集成Commitlint作为Git commit message规范校验； 56 | - 🎁 集成Changelog作为自动生成CHANGELOG.md； 57 | - 🎁 集成Husky作为Git commit message规范校验； 58 | - 🎁 集成Lint-staged作为Git commit message规范校验； 59 | - 🎁 集成Prettier作为Git commit message规范校验； 60 | - 🎁 集成Nuxt PWA作为PWA支持； 61 | - 🎁 集成Nuxt Composition API作为Vue3 Composition API支持； 62 | - 🎁 集成Nuxt Image作为图片优化支持； 63 | - 🎁 集成Nuxt Webfont loader作为字体加载支持； 64 | - 🎁 集成Nuxt Style Resources作为全局样式支持； 65 | - 🎁 集成Nuxt Google Analytics作为Google Analytics支持； 66 | - 🎁 集成Nuxt Google Tag Manager作为Google Tag Manager支持； 67 | - 🎁 集成Nuxt Sentry作为Sentry支持； 68 | - 🎁 集成Nuxt Sitemap作为Sitemap支持； 69 | - 🎁 集成Nuxt Robots作为Robots支持； 70 | 71 | ### 如何使用 72 | 73 | ```bash 74 | # 克隆项目 75 | git clone https://github.com/Createitv/nuxt3-tailwind-starter 76 | # 进入项目目录 77 | cd nuxt3-tailwind-starter 78 | # 安装依赖 79 | pnpm install 80 | # 启动服务 81 | pnpm dev 82 | ``` 83 | 84 | ### 如何部署 85 | 86 | ```bash 87 | # 构建 88 | pnpm build 89 | # 启动服务 90 | pnpm start 91 | ``` 92 | 93 | ### 如何查看 94 | 95 | ```bash 96 | # 启动服务 97 | pnpm dev 98 | # 打开浏览器 99 | http://localhost:3000 100 | ``` 101 | 102 | ### 如何提交 103 | 104 | ```bash 105 | # 提交代码 106 | git add . 107 | git commit -m 'feat: xxx' 108 | git push 109 | ``` 110 | ### 如何发布 111 | 112 | ```bash 113 | # 发布代码 114 | git tag v1.0.0 115 | git push origin v1.0.0 116 | ``` 117 | ### Github Action自动部署 118 | 119 | ```yml 120 | jobs: 121 | deploy: 122 | runs-on: ubuntu-latest 123 | steps: 124 | - uses: actions/checkout@v2 125 | # your build commands 126 | # - run: | 127 | # ng build --prod 128 | - uses: amondnet/vercel-action@v20 # deploy 129 | with: 130 | vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required 131 | github-token: ${{ secrets.GITHUB_TOKEN }} # Optional 132 | vercel-args: --prod # Optional 133 | vercel-org-id: ${{ secrets.ORG_ID}} # Required 134 | vercel-project-id: ${{ secrets.PROJECT_ID}} # Required 135 | working-directory: . 136 | ``` 137 | 138 | 上传Vecel生成的`VERCEL_TOKEN` `ORG_ID ` `PROJECT_ID`到项目的` Action secrets`每次推送`Main`分支自动同步部署到网站上 139 | 140 | -------------------------------------------------------------------------------- /app.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @import 'windplus/styles/main'; 2 | 3 | body { 4 | @apply text-gray-900 bg-gray-100 dark:text-white; 5 | } 6 | 7 | @layer base { 8 | :root { 9 | --color-text-base: #171717; 10 | --color-fill: #ffffff; 11 | --color-icon-fill: #1d4ed8; 12 | --color-text-icon: #ffffff; 13 | } 14 | } 15 | 16 | .feature-blue { 17 | --color-text-base: #ffffff; 18 | --color-fill: #2563eb; 19 | --color-icon-fill: #1d4ed8; 20 | --color-text-icon: #ffffff; 21 | } 22 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] } 2 | -------------------------------------------------------------------------------- /components/App/Footer.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 42 | -------------------------------------------------------------------------------- /components/App/Header.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 119 | 120 | 130 | -------------------------------------------------------------------------------- /components/App/LangSwitcher.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | -------------------------------------------------------------------------------- /components/Button/Button.stories.ts: -------------------------------------------------------------------------------- 1 | import type { Story } from '@storybook/vue3' 2 | import Button from './Button.vue' 3 | 4 | const variants = [ 5 | 'default', 6 | 'primary', 7 | 'secondary', 8 | 'info', 9 | 'warning', 10 | 'success', 11 | 'dark', 12 | ] 13 | 14 | const sizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] 15 | 16 | export default { 17 | title: 'Components/Button', 18 | component: Button, 19 | args: {}, 20 | } 21 | 22 | const Template: Story = (args, { argTypes }) => ({ 23 | components: { Button }, 24 | setup() { 25 | return { args, argTypes, variants } 26 | }, 27 | template: ` 28 |
29 | 32 |
33 | `, 34 | }) 35 | 36 | export const Default = Template.bind({}) 37 | Default.args = {} 38 | 39 | export const Outlined = Template.bind({}) 40 | Outlined.args = { 41 | outlined: true, 42 | } 43 | 44 | export const Text = Template.bind({}) 45 | Text.args = { 46 | text: true, 47 | } 48 | 49 | export const Rounded = Template.bind({}) 50 | Rounded.args = { 51 | rounded: true, 52 | } 53 | 54 | export const Block = Template.bind({}) 55 | Block.args = { 56 | block: true, 57 | } 58 | 59 | export const Disabled = Template.bind({}) 60 | Disabled.args = { 61 | disabled: true, 62 | } 63 | 64 | export const Sizes: Story = (args, { argTypes }) => ({ 65 | components: { Button }, 66 | setup() { 67 | return { args, argTypes, sizes } 68 | }, 69 | template: ` 70 |
71 | 74 |
75 | `, 76 | }) 77 | 78 | export const Icon: Story = (args, { argTypes }) => ({ 79 | components: { Button }, 80 | setup() { 81 | return { args, argTypes, sizes } 82 | }, 83 | template: ` 84 | 96 | `, 97 | }) 98 | -------------------------------------------------------------------------------- /components/Button/Button.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 76 | 77 | 297 | -------------------------------------------------------------------------------- /components/Contact/Form.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 |