<div style="width:256px;height:256px;border-radius: 16px;overflow:hidden;"> <img width="256px" height="256px" src="./src/public/logo.png" alt="vuesion logo"/> </div>

Vuesion

Vuesion is a boilerplate that empowers product teams to build faster with modern best practices across engineering and design. It features a full-stack framework, comprehensive design system, robust testing, and seamless internationalization.

Live demo

Please visit the vuesion app on heroku!

Or have a look into the future and visit the vuesion-next app on heroku!

Get started

Documentation

Features

Testing

• Cypress.io E2E testing
• Vitest Testing framework
• Testing-library to encourage good testing practices
• 250+ example tests included

DX, Code quality and maintenance

• TypeScript
• Eslint
• Commit message linting
• Prettier code formatting
• Semantic releases
• Changelog
• Husky pre-commit hooks
• Dockerfile included
• .env support

Core

• server-side-rendering, single-page-app or statically generated HTML with Nuxt.js
• 100% customizable Design-system with 35+ components including
  • layout, typography, button, input, select, checkbox, radio, (range-)slider, toggle, ...
  • theming/whitelabel support
• Figma UIKit
• SEO support
• i18n support
• Authentication module
• PWA module
• Code generators for
  • components
  • pages
  • RESTful APIs
  • pinia stores
• Storybook with the following add-ons
  • a11y
  • actions
  • console
  • links
  • story-source
  • viewport
  • theme-switcher
• Form validation with vee-validate
• Anime.js integration

Support this project

• Give a :star:!
• it!
• Join the <a href="https://discord.gg/59x5cg2" target="_blank"><img src="https://cdn0.iconfinder.com/data/icons/square-logo-buttons/512/discord-1-128.png" height="20px" /> Discord community</a>!
• Contribute!

Contribute

Contributions are always welcome! Please read the contribution guidelines first.

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://twitter.com/_jwerner_"><img src="https://avatars1.githubusercontent.com/u/1667598?v=4?s=64" width="64px;" alt="Johannes Werner"/><br />_{<b>Johannes Werner</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=devCrossNet" title="Code">💻</a> <a href="https://github.com/vuesion/vuesion/issues?q=author%3AdevCrossNet" title="Bug reports">🐛</a> <a href="https://github.com/vuesion/vuesion/commits?author=devCrossNet" title="Documentation">📖</a> <a href="#design-devCrossNet" title="Design">🎨</a> <a href="#example-devCrossNet" title="Examples">💡</a> <a href="#tool-devCrossNet" title="Tools">🔧</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/40818419"><img src="https://avatars2.githubusercontent.com/u/2235499?s=460&v=4?s=64" width="64px;" alt="Konstantin Kulinicenko"/><br />_{<b>Konstantin Kulinicenko</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=40818419" title="Code">💻</a> <a href="https://github.com/vuesion/vuesion/issues?q=author%3A40818419" title="Bug reports">🐛</a> <a href="https://github.com/vuesion/vuesion/commits?author=40818419" title="Documentation">📖</a> <a href="#example-40818419" title="Examples">💡</a></td> <td align="center" valign="top" width="14.28%"><a href="http://xmartin.de/"><img src="https://avatars2.githubusercontent.com/u/112532?v=4?s=64" width="64px;" alt="xMartin"/><br />_{<b>xMartin</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=xMartin" title="Code">💻</a> <a href="https://github.com/vuesion/vuesion/issues?q=author%3AxMartin" title="Bug reports">🐛</a> <a href="https://github.com/vuesion/vuesion/commits?author=xMartin" title="Documentation">📖</a> <a href="#example-xMartin" title="Examples">💡</a></td> <td align="center" valign="top" width="14.28%"><a href="http://saigao.fun"><img src="https://avatars0.githubusercontent.com/u/31165554?v=4?s=64" width="64px;" alt="Silver·湫澲"/><br />_{<b>Silver·湫澲</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=SilverLeaves" title="Documentation">📖</a> <a href="#translation-SilverLeaves" title="Translation">🌍</a></td> <td align="center" valign="top" width="14.28%"><a href="https://stavrosliaskos.com/"><img src="https://avatars2.githubusercontent.com/u/17932287?v=4?s=64" width="64px;" alt="Stavros Liaskos"/><br />_{<b>Stavros Liaskos</b>}</a><br /><a href="https://github.com/vuesion/vuesion/issues?q=author%3Astavros-liaskos" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://marceloboeira.com"><img src="https://avatars3.githubusercontent.com/u/1898225?v=4?s=64" width="64px;" alt="Marcelo Boeira"/><br />_{<b>Marcelo Boeira</b>}</a><br /><a href="#translation-marceloboeira" title="Translation">🌍</a></td> <td align="center" valign="top" width="14.28%"><a href="http://teamteatime.net/"><img src="https://avatars3.githubusercontent.com/u/3583774?v=4?s=64" width="64px;" alt="Rick Mann"/><br />_{<b>Rick Mann</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=Riari" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="http://www.EnigmaCurry.com"><img src="https://avatars0.githubusercontent.com/u/43061?v=4?s=64" width="64px;" alt="Ryan McGuire"/><br />_{<b>Ryan McGuire</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=EnigmaCurry" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/jmcdo29"><img src="https://avatars3.githubusercontent.com/u/28268680?v=4?s=64" width="64px;" alt="Jay McDoniel"/><br />_{<b>Jay McDoniel</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=jmcdo29" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://livkndt.com/"><img src="https://avatars.githubusercontent.com/u/3798005?v=4?s=64" width="64px;" alt="Olivia Knoedt"/><br />_{<b>Olivia Knoedt</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=livkndt" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="http://hugomagalhaes.com"><img src="https://avatars3.githubusercontent.com/u/497957?v=4?s=64" width="64px;" alt="Hugo Magalhães"/><br />_{<b>Hugo Magalhães</b>}</a><br /><a href="#translation-hugomn" title="Translation">🌍</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/glederer"><img src="https://avatars3.githubusercontent.com/u/7151993?v=4?s=64" width="64px;" alt="glederer"/><br />_{<b>glederer</b>}</a><br /><a href="https://github.com/vuesion/vuesion/commits?author=glederer" title="Documentation">📖</a></td> <td align="center" valign="top" width=