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.examplefile and copy it to.env. -
Set up GitHub Pages deployment (Optional): Update the
deploy:ghrun configuration inpackage.jsonto match your repository name. ReplaceGITHUB_PAGES_REPOwith 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
.envfile. - Create a
.envfile from the.env.examplefile and fill out the required variables. - The
.env.examplefile can be uploaded to the repository as a template for contributors. - Note: Do not commit the
.envfile to the repository and do not include sensitive information in the.env.examplefile.
- Environment variables are loaded from the
- EditorConfig:
- EditorConfig is used to maintain consistent coding styles between different editors and IDEs.
- The
.editorconfigfile 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.mjsfile 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.jsonfile contains the Prettier configuration for the project. - The
.prettierignorefile 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.