Nuxt 3 production-ready template (with TailwindCSS)

Other parts:

Improvement plan

Add NuxtUI
Add SEO modules
Add @vueuse/nuxt, @nuxt/image-edge, @nuxtjs/google-fonts
Add registration/authentication (with @pinia/nuxt)
Add SPA mode with Nginx

Local development

Preparation

Copy .env.example and rename it to .env
Install Node (version in .nvmrc)
Install and activate all recomended VSCode extensions
Enable Take Over Mode:
- Ctrl + Shift + P (macOS: Cmd + Shift + P).
- Type built and select Extensions: Show Built-in Extensions.
- Type typescript in the extension search box (do not remove @builtin prefix).
- Click the little gear icon of TypeScript and JavaScript Language Features, and select Disable (Workspace).
Install yarn:
```
npm install --global yarn
```
Install all packages
```
yarn
```
Run yarn typecheck for type checking
Run yarn lint for linting

Choose one of .env presets. HMR working in all modes.

To use Mode 1 and Mode 2, a raised container from this repo with Traefik is required. Because an external network to which frontend and backend containers are connected is created in Traefik compose.

Mode 0: As separate dev server on custom port

No need for a Traefik container
Set uniqe project name
```
COMPOSE_PROJECT_NAME=uniqe_name
```

Uncomment Mode 0 block:

# Mode 0: As separate dev server on custom port
COMPOSE_FILE=local.yml
DOMAIN=localhost
NUXT_DOCKER_PORT=3018  # custom port
HMR_DOCKER_PORT=24678

Run docker compose build and docker compose up -d

Mode 1: As dev server behind the Traefik with http

The Traefik container must be running in Mode 1
Set the project name same as COMPOSE_PROJECT_NAME in Traefik .env
```
COMPOSE_PROJECT_NAME=example
```

Uncomment Mode 1 block:

# Mode 1: As dev server behind the Traefik with http
# For Windows users: use `;` (semicolon) as separator - local.yml;local.traefik.yml
COMPOSE_FILE=local.yml:local.traefik.yml
DOMAIN=localhost  # or another aliace for 127.0.0.1 declared in etc/hosts, but same as DOMAIN in Traefik .env!

Run Traefik container, then run Nuxt container with docker compose build and docker compose up -d

Mode 2: As dev server behind the Traefik + SSL and custom domain

The Traefik container must be running in Mode 2
Set the project name same as COMPOSE_PROJECT_NAME in Traefik .env
```
COMPOSE_PROJECT_NAME=example
```

Uncomment Mode 2 block:

# Mode 2: As dev server behind the Traefik + SSL and custom domain
# For Windows users: use `;` (semicolon) as separator - local.yml;local.traefik.yml;local.traefik.ssl.yml
COMPOSE_FILE=local.yml:local.traefik.yml:local.traefik.ssl.yml
DOMAIN=tpl.local  # same as DOMAIN in Traefik .env!

Run Traefik container, then run Nuxt container with docker compose build and docker compose up -d

Deploy to production

Using this modes assumes that the your-domain.com is already bound to your server (A records are configured) and Traefik container raised in production mode

Mode 3: SSR (Universal rendering) with Node.js server

The Traefik container must be running in Mode 3 on prod server
Copy .env.example and rename it to .env on prod server
Set the project name same as COMPOSE_PROJECT_NAME in Traefik .env
```
COMPOSE_PROJECT_NAME=example
```

Uncomment Mode 3 block:

# Mode 3: For production with SSR
COMPOSE_FILE=production.yml
DOMAIN=your-domain.com

Run container with docker compose build and docker compose up -d

Mode 4: SPA with Nginx

coming soon...

Contributing

I made this template for myself, but it's awesom if it helps someone else. The settings are far from ideal, so fell free to make a pull request.

Name		Name	Last commit message	Last commit date
Latest commit History 93 Commits
.github		.github
.vscode		.vscode
assets/css		assets/css
components		components
compose		compose
layouts		layouts
middleware		middleware
pages		pages
public		public
server		server
store		store
types		types
.dockerignore		.dockerignore
.env.example		.env.example
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
LICENSE		LICENSE
README.md		README.md
app.config.ts		app.config.ts
app.vue		app.vue
local.traefik.ssl.yml		local.traefik.ssl.yml
local.traefik.yml		local.traefik.yml
local.yml		local.yml
nuxt.config.ts		nuxt.config.ts
package.json		package.json
production.test.yml		production.test.yml
production.yml		production.yml
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Nuxt 3 production-ready template (with TailwindCSS)

Improvement plan

Local development

Preparation

Mode 0: As separate dev server on custom port

Mode 1: As dev server behind the Traefik with http

Mode 2: As dev server behind the Traefik + SSL and custom domain

Deploy to production

Mode 3: SSR (Universal rendering) with Node.js server

Mode 4: SPA with Nginx

Contributing

About

Releases

Packages

Contributors 2

Languages

License

baikov/tpl-nuxt3

Folders and files

Latest commit

History

Repository files navigation

Nuxt 3 production-ready template (with TailwindCSS)

Improvement plan

Local development

Preparation

Mode 0: As separate dev server on custom port

Mode 1: As dev server behind the Traefik with http

Mode 2: As dev server behind the Traefik + SSL and custom domain

Deploy to production

Mode 3: SSR (Universal rendering) with Node.js server

Mode 4: SPA with Nginx

Contributing

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Languages

Packages