Alpende

This is an opinionated starting point for full-stack, type-safe Nuxt apps.

🚀 Getting started

There are two ways to get started with this template:

• Use this template to create a new project
• Initialise a new Nuxt project with this template:

pnpm dlx nuxi@latest init -t https://codeload.github.com/jakezneal/alpende/tar.gz/refs/heads/main <project-name>

🔄 Updating

This template contains a GitHub Action that will periodically check for updates in this template and create a PR in your repository if there are any updates.

If you want to ignore specific files or folders from being updated, you can create a .github/.templatesyncignore file, which is similar to .gitignore. I'd recommend ignoring the GitHub workflows folder as this will cause issues with the GitHub Action.

You can update the frequency of the GitHub Action by updating .github/workflows/template_sync.yml, or removing it completely if you don't want to keep up to date with this template.

✨ Features

• ⛰️ Nuxt
• 🅿️ Prettier
• ⚙️ T3 Env — Type-safe environment variables
• 🧪 Testing
  • Vitest
  • Vue Testing Library
  • Testing Library Selector
  • Vue Test Utils
  • Nuxt Test Utils
• 📖 Storybook
• 🍃 Tailwind CSS
• 🍍 Pinia

🧪 Testing

This template adds a v-test directive to make it easier to target elements in your unit tests, and to encourage targeting elements with testIds, which improves the resilience of our tests. For further reading, check out this article by Kent C. Dodds.

You can use the v-test directive in the following way:

<ul>
    <li>Some item I don't want to test</li>
    <li v-test:testableListItem>My testable element</li>
    <li>Another item I don't want to test</li>
</ul>

🪄 Component generation

This template includes a CLI for generating components. This outputs a .vue, .spec.ts, and a .stories.ts file for each component in the given path.

Generating a component:

pnpm make:component <path>

e.g.

pnpm make:component src/components/ui/AppLogo

🗣️ Commands

👷 Build

pnpm build

🚀 Dev

pnpm dev

🪄 Format

pnpm format

🧪 Test

pnpm test

To generate a coverage report:

pnpm test:coverage

To run Vitest UI:

pnpm test:ui

📖 Storybook

pnpm storybook