Enjoyed by 2,766 stargazers 🎉
chrispahm
Zainal21
roiLeo
depsimon
abdu4188
draganaberbatovic
andydptyo
AntonioLeutsch
stefangalescu
ramadhanep
icai
khalby786
yoochangoh
longben
JakubRobotka
SudhanPlayz
Built for modern product teams
Built for modern product teams
- Product Manager
- Engineering Manager
- Designer
- Engineer
- Team
Product Manager All you need for a productive product team
- the design system increases the collaboration process between design, engineering, and product management
- productive from day one - more time to solve pain points for your users rather than implementing common features
Engineering Manager Enable your team to work agile and stay on top of things
- community best practices support your team to maintain a clean codebase
- set up that forces testing best practices, a high test coverage and lots of example tests support an agile project management style
- the 100% customizable design system and corresponding Figma file will increase the collaboration across disciplines and deliver perfect brand identity (designers will love it)
- the accessible codebase enables everyone in the team to contribute (even PMs and Designers) and makes on-boarding new team members fun
Designer All the best user experience & interface practices built-in
- benefit from practices that worked well across many project types and don't fall into traps that we already experienced
- the Figma file that is 100% in sync with the implemented design system will make the work with engineering fun and helps the communication and collaboration across disciplines by providing a common vocabulary
- designed for modularity and reusability
Engineer Keep your codebase clean and focus on your domain logic
- most common use-cases, tools, libraries, and technologies already set up will give you more time to focus on building a great product
- set up that forces testing best practices, high test coverage and lots of examples will help the team to keep the codebase agile and to welcome changing requirements
- the 100% customizable design system and corresponding Figma file will increase the collaboration across disciplines and deliver perfect brand identity (designers will love it)
- server-side-rendering set up and ready to use to satisfy the projects SEO needs (not mandatory - start with an SPA until you need it!)
- speed up your work and keep your code consistent with code generators for components, stories, tests, pages, vuex-modules, interfaces and fixtures
Team Happy, Happy, Happy 😊
- improve communication across disciplines by using the design system documentation - let everyone in your project know how you call the things!
- focus on solving pain points for your users to create an awesome product and don't waste time on common features
- ship a consistent looking product that your users will love
- prepared to grow and scale as your project matures
Features Save months of work by not writing these 100,000+ lines of code
Nuxt.js Boilerplate
Nuxt.js is already set up with commonly used modules. Benefit from the Nuxt.js ecosystem, server-side-rendering, or statically rendered pages. Testing
Cypress, Jest, the Testing Library and more than 250 tests with an initial 100% test coverage will give you confidence in the code you ship. Design System
The included design system is 100% customizable and themeable because it's part of your code-base. Never make compromises again! Storybook & Figma
Storybook makes it easy to develop reusable components. It also can increase the communication in the team because everything has a name. The Vuesion Figma file will make the collaboration between Design and Engineering a breeze. Marketing & i18n
Nuxt.js will increase your SEO by delivering rendered HTML either dynamically or statically. The vue-i18n module and a vuesion CLI command will make it easy to translate your application into other languages. Authentication
Full set up of the Nuxt.js auth module makes it easy to integrate with different schemes (Cookie, Oauth2, PKCE), 3rd party providers (Auth0, Facebook, Github, etc.), or your own solution. DX & Code quality
TypeScript, Eslint, Commit message lint, Prettier, Semantic releases, generated Changelog, Husky, and Code generators will help you to keep your code-base clean and consistent. Axios & GraphQL
The Nuxt.js Apollo module is set up to work together with the Nuxt.js Axios module. Axios is integrated with the Nuxt.js Auth module and provides re-authentication out of the box. Progressive Web App
The Nuxt.js PWA module allows you to register a Service Worker and it automatically generates a manifest.json and app icons. It also integrates with the Free, high volume, and reliable push notification service OneSignal. Learn more about Vuesion 
Hello Engineer. Installing Vuesion. To use Vuesion, you need to have Node.js installed on your system. Vuesion can be installed by running
npx @vuesion/create my-app. It will create the project folder, downloads the Vuesion repository, and installs dependencies. After the process has finished, cd my-app and run npm run dev. Have fun! Read the docs Hello Designer. Using the Figma file. Vuesion makes it simple to get started with design. duplicate the figma file from community and begin pulling all the components you need for your product. Open Design System in Figma
Join in on the conversation. We invite everyone who respects our Code of Conduct to join our Discord server. Be part of an ever-growing community that wants to improve how teams build great products around the world in all industries. Join our Discord server
Read the docs! Currently, work in progress. We aim to provide carefully written docs to make it easy for you to use Vuesion and to on board new team members as quickly as possible. Jump to the docs
Try out some examples!
Authentication. This example shows how to use the nuxt-auth module. You will be redirected to a protected page with scenarios like re-authentication and error handling.
State management. This example shows the basic usage of Pinia including Getters, Actions, SSR pre-fetching, and composition-api. Go to Pinia example
Form validation. This example shows how to validate forms with the vee-validate library and the Vuesion components. Go to Form example