A boilerplate for quickly getting started with Nuxt 4 applications. This template includes TypeScript, Nuxt UI, ESLint, Prettier, Pinia, GitHub Pages deployment, Vitest, and more.
- Nuxt 4 with TypeScript: Uses Nuxt 4's app directory and supports TypeScript with strict type-checking.
- Tailwind CSS with Typography: Provides utility-first CSS and optimized typography for rich text content.
- Testing Setup: Includes Vitest with coverage, and Playwright for end-to-end testing.
- Linting and Formatting: Configured with ESLint and Prettier for code consistency.
- GitHub Pages Ready: Configure with GitHub Pages deployment.
-
Create a new repository from this template: Click the "Use this template" button to create a new repository from this template.
-
Clone the repository:
git clone <repository-url> cd <repository-name>
-
Install dependencies:
# yarn yarn install # pnpm pnpm install # bun bun install # npm npm install
-
Set up environment variables: Fill out the
.env.example
file and copy it to.env
. -
Set up GitHub Pages deployment (Optional): Update the
deploy:gh
run configuration inpackage.json
to match your repository name. ReplaceGITHUB_PAGES_REPO
with your GitHub Pages repository name. -
Start the development server:
# yarn yarn dev # pnpm pnpm dev # bun bun run dev # npm npm run dev
-
Open the application: Open http://localhost:3000 to view the application in your browser.
A list of available scripts for this project.
Run with yarn <script>
, pnpm <script>
, bun run <script>
, or npm run <script>
.
The project is set up for
yarn
, other package managers may require updating the scripts inpackage.json
.
build
- Builds the application for production.dev
- Starts the development server.generate
- Generates a static version of the application.preview
- Preview the static version of the application.postinstall
- Runs after installing dependencies to prepare the application.test
- Runs the test suite with Vitest.coverage
- Runs the test suite with code coverage.lint:eslint
- Lints files with ESLint.lint:prettier
- Formats files with Prettier.lint
- Lints and formats files with ESLint and Prettier.lintfix
- Fixes linting and formatting issues.deploy:gh
- Deploys the application to GitHub Pages.typecheck
- Type-checks the application with TypeScript.
- Environment Variables:
- Environment variables are loaded from the
.env
file. - Create a
.env
file from the.env.example
file and fill out the required variables. - The
.env.example
file can be uploaded to the repository as a template for contributors. - Note: Do not commit the
.env
file to the repository and do not include sensitive information in the.env.example
file.
- Environment variables are loaded from the
- EditorConfig:
- EditorConfig is used to maintain consistent coding styles between different editors and IDEs.
- The
.editorconfig
file contains the configuration for the project. - You may need to install an EditorConfig plugin for your editor to use this configuration.
- VS Code users can install the EditorConfig for VS Code extension.
- Other editors may have built-in support for EditorConfig.
- ESLint:
- ESLint is used to lint files.
- The
eslint.config.mjs
file contains the ESLint configuration for the project. - It is set up using Nuxt ESLint and Antfu's ESLint configuration.
- Prettier:
- Prettier is used to format files.
- The
.prettierrc.json
file contains the Prettier configuration for the project. - The
.prettierignore
file contains the files to ignore when formatting.
- Nuxt 4: The core framework for building the application.
- TypeScript: Adds TypeScript support to the project.
Nuxt UI : Easily create UI components with TailwindCSS.- Pinia: State management library.
- VueUse: Collection of useful Vue composition functions.
- Nuxt Image: Optimized image loading.
- Nuxt Icon: Icon components.
- Nuxt Test Utils: Testing utilities.
.github/
: Contains GitHub Actions workflows.app/
: Contains the application source code.components/
: Contains Vue components.layouts/
: Contains layout components.pages/
: Contains the application pages.utils/
: Contains utility functions.
e2e/
: Contains end-to-end tests.public/
: Contains static assets.server/
: Contains server-side code.shared/
: Contains shared utility files.stores/
: Contains Pinia store modules.
This project is licensed under the MIT License - see the LICENSE file for more details.