8000 GitHub - TreyRuffy/Nuxt-Boilerplate: Opinionated Nuxt 4 Boilerplate
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

TreyRuffy/Nuxt-Boilerplate

Repository files navigation

Nuxt 4 Boilerplate

Build and Test status Deploy status

Prettier ESLint Repo Size License

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.

Features

  • 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.

Getting Started

  1. Create a new repository from this template: Click the "Use this template" button to create a new repository from this template.

  2. Clone the repository:

    git clone <repository-url>
    cd <repository-name>
  3. Install dependencies:

    # yarn
    yarn install
    
    # pnpm
    pnpm install
    
    # bun
    bun install
    
    # npm
    npm install
  4. Set up environment variables: Fill out the .env.example file and copy it to .env.

  5. Set up GitHub Pages deployment (Optional): Update the deploy:gh run configuration in package.json to match your repository name. Replace GITHUB_PAGES_REPO with your GitHub Pages repository name.

  6. Start the development server:

    # yarn
    yarn dev
    
    # pnpm
    pnpm dev
    
    # bun
    bun run dev
    
    # npm
    npm run dev
  7. Open the application: Open http://localhost:3000 to view the application in your browser.


Available Scripts

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 in package.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.

Configuration

  • 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.
  • 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:
  • 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.

Modules and Dependencies

  • 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.

Directory Structure

  • .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.

License

This project is licensed under the MIT License - see the LICENSE file for more details.

About

Opinionated Nuxt 4 Boilerplate

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
0