├── .devcontainer └── devcontainer.json ├── .dockerignore ├── .gitignore ├── .vscode ├── extensions.json ├── settings.json └── tailwindcss.json ├── Dockerfile ├── LICENSE ├── README.md ├── app.vue ├── docker-compose.dev.yml ├── docker-compose.prod.yml ├── docker-compose.yml ├── layouts └── hello.vue ├── nuxt.config.ts ├── package.json ├── pages └── index.vue ├── tailwind.config.js ├── tsconfig.json └── yarn.lock /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node 18.15.0 on Alpine 3.16", 3 | "build": { 4 | "dockerfile": "../Dockerfile", 5 | "target": "node-base" 6 | }, 7 | "forwardPorts": [ 3000 ], 8 | "workspaceFolder": "/home/node/app", 9 | "containerUser": "node", 10 | "mounts": [ 11 | "source=${localWorkspaceFolder}/,target=/home/node/app/,type=bind,consistency=cached" 12 | ], 13 | "customizations": { 14 | "vscode": { 15 | "extensions": [ 16 | "vue.volar", 17 | "bradlc.vscode-tailwindcss", 18 | "cpylua.language-postcss" 19 | ] 20 | } 21 | }, 22 | "postCreateCommand": "yarn", 23 | "postStartCommand": "yarn dev" 24 | } -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | .cache/ 2 | .devcontainer/ 3 | .nuxt/ 4 | .vscode/ 5 | node_modules/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .nuxt 4 | nuxt.d.ts 5 | .output 6 | dist 7 | .DS_Store -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "bradlc.vscode-tailwindcss", 4 | "vue.volar" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.customData": [".vscode/tailwindcss.json"], 3 | "editor.quickSuggestions": { 4 | "strings": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/tailwindcss.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1.1, 3 | "atDirectives": [ 4 | { 5 | "name": "@tailwind", 6 | "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", 7 | "references": [ 8 | { 9 | "name": "Tailwind Documentation", 10 | "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" 11 | } 12 | ] 13 | }, 14 | { 15 | "name": "@responsive", 16 | "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", 17 | "references": [ 18 | { 19 | "name": "Tailwind Documentation", 20 | "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" 21 | } 22 | ] 23 | }, 24 | { 25 | "name": "@screen", 26 | "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", 27 | "references": [ 28 | { 29 | "name": "Tailwind Documentation", 30 | "url": "https://tailwindcss.com/docs/functions-and-directives#screen" 31 | } 32 | ] 33 | }, 34 | { 35 | "name": "@variants", 36 | "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", 37 | "references": [ 38 | { 39 | "name": "Tailwind Documentation", 40 | "url": "https://tailwindcss.com/docs/functions-and-directives#variants" 41 | } 42 | ] 43 | } 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:18.17.1-alpine3.17 as node-base 2 | # docker build --no-cache --progress plain -t ricardobalk/nuxt3-tailwindcss:latest --target -f Dockerfile . 3 | 4 | RUN apk add --no-cache git 5 | 6 | USER node 7 | ENV NPM_CONFIG_PREFIX=/home/node/.npm 8 | ENV PATH=$PATH:/home/node/.npm/bin 9 | 10 | 11 | RUN mkdir -p "${HOME}/app" \ 12 | "${NPM_CONFIG_PREFIX}/bin" 13 | 14 | RUN printf "Node version %s, npm version %s, yarn version %s\n\n" \ 15 | "$(node -v)" "$(npm -v)" "$(yarn -v)" 16 | 17 | FROM node-base as dependencies 18 | USER node 19 | WORKDIR /home/node/app 20 | COPY --chown=node:node . . 21 | RUN yarn 22 | ENTRYPOINT ["yarn", "run"] 23 | 24 | FROM dependencies as development 25 | USER node 26 | EXPOSE 3000 27 | CMD ["dev"] 28 | # && docker run -it -p 3000:3000 -v "$(pwd):/home/node/app:cached" ricardobalk/nuxt3-tailwindcss:latest 29 | 30 | FROM dependencies as build 31 | USER node 32 | RUN ["yarn", "run", "generate"] 33 | 34 | FROM nginx:1.25.2-alpine3.18-slim as deployment 35 | COPY --from=build /home/node/app/.output/public /usr/share/nginx/html 36 | EXPOSE 80 443 37 | CMD ["nginx", "-g", "daemon off;"] 38 | # && docker run -it -p 80:80 -p 443:443 -v "$(pwd)/nginx.conf:/etc/nginx/conf.d/default.conf:cached" ricardobalk/nuxt3-tailwindcss:latest -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | ISC License 2 | 3 | Copyright (c) 2023-present, Ricardo Balk 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Starter Kit 2 | 3 | A Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, PostCSS, and TailwindCSS. 4 | 5 | ## Features 6 | 7 | This starter kit includes the following technologies: 8 | 9 | - **Nuxt 3**: A Vue 3 framework for modern web applications. 10 | - **Vite**: A fast and lightweight bundler for quick development. 11 | - **TypeScript**: A typed superset of JavaScript for improved developer experience and reduced bugs. 12 | - **TailwindCSS**: A utility-first CSS framework for rapid UI development. 13 | 14 | With the included TailwindCSS setup, you can use both Tailwind classes and 'semantic' classes. This allows you to prototype your application quickly and refactor it later with more 'semantic' class names. 15 | 16 | Example 1 (using a TailwindCSS class name): 17 | 18 | ```vue 19 | 22 | ``` 23 | 24 | Example 2 (using a 'semantic' class name): 25 | 26 | ```vue 27 | 30 | 31 | 36 | ``` 37 | 38 | You can also use other TailwindCSS directives and extend your theme in the `tailwind.config.js` file. Refer to the [TailwindCSS documentation][] for more details. 39 | 40 | ## Getting Started 41 | 42 | To start the development server, you have multiple options: 43 | 44 | **1. Online Development Environment** 45 | 46 | You can use online development environments for hassle-free development without local installations. Recommended options include: 47 | 48 | - [Stackblitz][online-dev-env-stackblitz] 49 | - [GitHub Codespaces][online-dev-env-github-codespaces] 50 | - [VSCode on the web][online-dev-env-vscode-web] 51 | 52 | **2. Local, Containerized Development Environment** 53 | 54 | For more serious development, consider a local, containerized setup. Benefits include pre-configured dependencies. Options: 55 | 56 | **a) Using VSCode Remote Containers / Dev Containers (easiest)** 57 | 58 | Use [VSCode][vscode] with the [Remote Containers / Dev Containers][vscode-remote-containers] extension. 59 | 60 | **b) Using Docker Compose (easiest without VSCode)** 61 | 62 | Run this command: 63 | 64 | ```sh 65 | docker-compose -f docker-compose.dev.yml up 66 | ``` 67 | 68 | **c) Using Docker (Method 1, building the image)** 69 | 70 | Build and run the image: 71 | 72 | ```sh 73 | docker build --no-cache -t LighthouseLab/nuxt3-tailwindcss:latest --target development -f Dockerfile . 74 | docker run --rm -it -p 3000:3000 -v "$(pwd):/home/node/app:cached" LighthouseLab/nuxt3-tailwindcss:latest 75 | ``` 76 | 77 | **d) Using Docker (Method 2, without building the image)** 78 | 79 | Run this command: 80 | 81 | ```sh 82 | docker run -it --rm -v "$(pwd):/app" -p 3000:3000 -w /app node:18.15.0-alpine3.16 yarn && yarn dev 83 | ``` 84 | 85 | > Tip: The Dockerfile uses a multi-stage build to keep the final image small. Refer to the `Dockerfile` for details. 86 | 87 | **3. Local Node.js Installation** 88 | 89 | If you have Node.js installed locally: 90 | 91 | - Run `yarn install` to install dependencies. 92 | - Use `yarn dev` to start the development server (http://localhost:3000). 93 | - Run `yarn build` for production build. 94 | - Start the production server with `yarn start`. 95 | - Generate the application for static hosting using `yarn generate`. 96 | 97 | For more details, consult the [official Nuxt 3 deployment documentation][]. 98 | 99 | ## License 100 | 101 | [ISC License](LICENSE) 102 | 103 | 104 | [docker-compose]: https://docs.docker.com/compose/ 105 | [docker]: https://www.docker.com/ 106 | [official Nuxt 3 deployment documentation]: https://nuxt.com/docs/getting-started/deployment 107 | [online-dev-env-github-codespaces]: http://github.dev/LighthouseLab/nuxt3-tailwindcss 108 | [online-dev-env-stackblitz]: https://stackblitz.com/github/LighthouseLab/nuxt3-tailwindcss 109 | [online-dev-env-vscode-web]: https://vscode.dev/github/LighthouseLab/nuxt3-tailwindcss 110 | [TailwindCSS documentation]: https://tailwindcss.com/docs 111 | [vscode-remote-containers]: https://code.visualstudio.com/docs/remote/containers 112 | [vscode]: https://code.visualstudio.com/ -------------------------------------------------------------------------------- /app.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /docker-compose.dev.yml: -------------------------------------------------------------------------------- 1 | services: 2 | nuxt3-tailwindcss: 3 | build: 4 | context: . 5 | dockerfile: Dockerfile 6 | target: development 7 | ports: 8 | - "3000:3000" 9 | environment: 10 | - NODE_ENV=development 11 | volumes: 12 | - ./:/home/node/app/ 13 | - node_modules:/home/node/app/node_modules/ 14 | volumes: 15 | node_modules: {} -------------------------------------------------------------------------------- /docker-compose.prod.yml: -------------------------------------------------------------------------------- 1 | version: '3.8' 2 | services: 3 | nuxt3-tailwindcss: 4 | extends: 5 | file: docker-compose.dev.yml 6 | service: nuxt3-tailwindcss 7 | build: 8 | target: production 9 | ports: 10 | - "80:80" 11 | - "443:443" 12 | environment: 13 | - NODE_ENV=production 14 | volumes: 15 | - ./:/home/node/app/ 16 | - node_modules:/home/node/app/node_modules/ 17 | volumes: 18 | node_modules: {} -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | docker-compose.dev.yml -------------------------------------------------------------------------------- /layouts/hello.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 37 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtConfig } from 'nuxt/config' 2 | 3 | export default defineNuxtConfig({ 4 | postcss: { 5 | plugins: { 6 | 'postcss-import': {}, 7 | 'tailwindcss/nesting': {}, 8 | tailwindcss: {}, 9 | autoprefixer: {}, 10 | }, 11 | }, 12 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "repository": { 4 | "type": "git", 5 | "url": "https://github.com/ricardobalk/nuxt3-tailwindcss.git" 6 | }, 7 | "scripts": { 8 | "dev": "nuxt dev", 9 | "build": "nuxt build", 10 | "start": "node .output/server/index.mjs", 11 | "generate": "nuxt generate", 12 | "preview": "nuxt preview" 13 | }, 14 | "devDependencies": { 15 | "autoprefixer": "^10.4.15", 16 | "nuxt": "^v3.7.3", 17 | "postcss": "^8.4.29", 18 | "tailwindcss": "^3.3.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | /** @type {import('tailwindcss').Config} */ 3 | module.exports = { 4 | content: [ 5 | "./components/**/*.{js,vue,ts}", 6 | "./layouts/**/*.vue", 7 | "./pages/**/*.vue", 8 | "./plugins/**/*.{js,ts}", 9 | "./nuxt.config.{js,ts}", 10 | "./app.vue", 11 | ], 12 | theme: { 13 | extend: { 14 | colors: { 15 | gray: { 16 | 25: "#fafafa", 17 | 50: "#f2f2f2", 18 | 100: "#e6e6e6", 19 | 200: "#cccccc", 20 | 300: "#b3b3b3", 21 | 400: "#999999", 22 | 500: "#808080", 23 | 600: "#666666", 24 | 700: "#4d4d4d", 25 | 800: "#333333", 26 | 900: "#1a1a1a", 27 | 925: "#0d0d0d", 28 | }, 29 | }, 30 | }, 31 | }, 32 | variants: { 33 | extend: {}, 34 | }, 35 | plugins: [ 36 | plugin(function({ addUtilities }) { 37 | addUtilities({ 38 | '.bg-green-striped': { 39 | 'background-image': `linear-gradient(45deg, #0a2000 10%, transparent 10%, 40 | transparent 20%, #0a2000 20%, #0a2000 30%, transparent 30%, transparent 40%, 41 | #0a2000 40%, #0a2000 50%, transparent 50%, transparent 60%, #0a2000 60%, 42 | #0a2000 70%, transparent 70%, transparent 80%, #0a2000 80%, #0a2000 90%, 43 | transparent 90%, transparent)`, 44 | }, 45 | }) 46 | }) 47 | ], 48 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | --------------------------------------------------------------------------------