This is an opinionated starting point for full-stack, type-safe Nuxt apps.
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>
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.
- ⛰️ Nuxt
🅿️ Prettier- ⚙️ T3 Env — Type-safe environment variables
- 🧪 Testing
- 📖 Storybook
- 🍃 Tailwind CSS
- 🍍 Pinia
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>
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
pnpm build
pnpm dev
pnpm format
pnpm test
To generate a coverage report:
pnpm test:coverage
To run Vitest UI:
pnpm test:ui
pnpm storybook