Vuesion is a boilerplate that helps product teams build faster than ever with fewer headaches and modern best practices across engineering & design.

Last update: Jul 2, 2022

vuesion logo

Vuesion

Vuesion is a boilerplate that helps product teams build faster than ever with fewer headaches and modern best practices across engineering & design.

GitHub release Test Coverage Maintainability Maintenance CircleCI GitHub issues-closed FOSSA Status MIT license

Live demo

Please visit the vuesion app on heroku!

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

Features

Testing

DX, Code quality and maintenance

Core

Getting started

Important note for Windows users only: https://github.com/zkat/npx/issues/146#issuecomment-384016791

  1. Run npx @vuesion/create [project-name] for example npx @vuesion/create my-app (try the latest version by adding the --next flag)
  2. Change directory cd my-app
  3. Run npm run dev

Documentation

https://vuesion.github.io/docs/en/v4/

Support this project

Contribute

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

Thanks goes to these wonderful people:


Johannes Werner

πŸ’» πŸ› πŸ“– 🎨 πŸ’‘ πŸ”§

Konstantin Kulinicenko

πŸ’» πŸ› πŸ“– πŸ’‘

xMartin

πŸ’» πŸ› πŸ“– πŸ’‘

SilverΒ·ζΉ«ζΎ²

πŸ“– 🌍

Stavros Liaskos

πŸ›

Marcelo Boeira

🌍

Rick Mann

πŸ’»

Ryan McGuire

πŸ’»

Jay McDoniel

πŸ’»

Olivia Graham

πŸ’»

Hugo MagalhΓ£es

🌍

glederer

πŸ“–

Tamer Mohamed

πŸ’»

Rizwan Zaheer

πŸ“–

rgrosjean

πŸ’»

Bernardo Corbella

πŸ’»

Mohit Tilwani

πŸ’»

eipiminus1

πŸ“–

Jez McKean

πŸ“–

Duylam Nguyen-Ngo

🎨

Martin Merschroth

🎨

Camila Peralta Wieland

🎨

Alec M

πŸ“–

misikoff

πŸ’»

θ‡­ε“₯ε“₯Β·ζΉ«ζ›—

πŸ“–

Paul Vogel

πŸ“–

Dario Fuzinato

πŸ’»

Maksim Bock

⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

References

Contact

License

MIT

GitHub

https://github.com/devCrossNet/vue-starter/
Comments
  • 1. Dev-server returned status code: 500.

    Describe the bug Development server does not start successfully, unable to connect to dev server. Try to open http://localhost:3000 manually.

    • There was nothing on port 3000. but got
    (node:44584) UnhandledPromiseRejectionWarning: #<Object>
    (node:44584) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handl
    ed with .catch(). (rejection id: 7)
    (node:44584) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    
    

    To Reproduce Steps to reproduce the behavior:

    1. Run through set up process running initial commands using npx
    2. cd into the project directory
    3. Run npm run dev
    4. Error status code 500

    Expected behavior Was supposed to start dev server without any hiccups. Then run on port 3000.

    Screenshots 2019-07-18_13-52-56

    Desktop (please complete the following information):

    • OS: Windows 10
    • Browser Chrome
    • Version 74

    Additional context Maybe the deprecated promises are causing the server not to start?

    Reviewed by HeavenlyEntity at 2019-07-18 20:56
  • 2. Build SPA: "npm run build:spa" not work correctly & a long time for build

    "npm run build:spa" not work correctly

    - [x] bug report -> please search issues before submitting
    - [x] feature request
    

    Versions.

    firefox:
    lastest: 
    windows10: 
    corei5-8250U:
    

    Repro steps.

    npm run build:spa
    npm i -g anywhere
    cd dist
    anywhere
    

    Desired functionality.

    • SPA without server-side
    • A short time to clean up
    • A short time to build

    Mention any other details that might be useful.

    • SPA always show error for me. Whatever language it is.

    The SPA not work correctly

    A long time for build

    • "npm run build:spa" tookes me more than 20min,

    then I add "build:span" without run clean to package.json,

    • "npm run build:spa" tookes me 13min.

    enn...

    too long time to build

    Reviewed by Akimotorakiyu at 2018-07-25 11:00
  • 3. vue-starter as vue-cli template?

    After vue-cli RC:

    • should the vue-starter be a vue-cli template?

    • how can we do this?

    pros

    • set up a new project with the right naming

    cons

    • you need to install vue-cli
    Reviewed by devCrossNet at 2018-05-22 11:36
  • 4. discussion: vision

    assets we have to keep:

    • access to the critical code (UI, moving parts) to enable quick changes for devs
    • opinionated
    • 100% customizable
    • Typescript
    • ALL THE USE CASES !!! 😊
    Reviewed by devCrossNet at 2018-12-10 13:56
  • 5. Problems trying out the 'example guard'

    Describe the bug I want to implement authentication with passportjs. On my way I was trying to understand how the 'beforeEach' works and how I could leverage it. So far, I don't get it.

    To Reproduce Steps to reproduce the behavior:

    1. In src/app/router.ts i did set Γ¬sAuthenticated` to true:
    ...
    // example guard
    // TODO remove or adjust in production code
    router.beforeEach((to: Route, from: Route, next: any) => {
      if (to.matched.some((record: RouteRecord) => record.meta.requiresAuth)) {
        // this route requires auth, check if logged in if not, redirect to login page.
        const isAuthenticated = true; // TODO implement real auth check
        if (!isAuthenticated) {
          return next({ path: '/login', query: { redirect: to.fullPath } });
        } else {
          return next();
        }
      } else {
        return next();
      }
    });
    ...
    
    1. In src/app/app/routes.ts
    ...
      // will redirect to `/login` (implemented in `src/app/router`)
      {
        path:      '/counter',
        meta:      { requiresAuth: true },
      }
    ...
    
    1. go to localhost:3000/counter

    Result I receive the following error on the console:

    error: error during rendering: /counter; error: {"stack":"TypeError: Cannot read property 'prefetch' of undefined\n    at Promise.all.matchedComponents.map (webpack-internal:///./src/server/isomorphic.ts:70:31)\n    at Array.map (<anonymous>)\n    at router.onReady (webpack-internal:///./src/server/isomorphic.ts:69:40)\n    at AbstractHistory.onReady (/home/jonass/IdeaProjects/testsoltions-homebase/node_modules/vue-router/dist/vue-router.common.js:1859:5)\n    at VueRouter.onReady (/home/jonass/IdeaProjects/testsoltions-homebase/node_modules/vue-router/dist/vue-router.common.js:2528:16)\n    at Promise (webpack-internal:///./src/server/isomorphic.ts:59:14)\n    at new Promise (<anonymous>)\n    at __webpack_exports__.default (webpack-internal:///./src/server/isomorphic.ts:52:12)\n    at /home/jonass/IdeaProjects/testsoltions-homebase/node_modules/vue-server-renderer/build.js:8386:43\n    at new Promise (<anonymous>)","message":"Cannot read property 'prefetch' of undefined"}
    

    Expected behavior I would have expected the counter page to show up.

    I'm sure I misunderstood sth fundamental on how authorization should work in this context, and though would be very happy about your support.

    Reviewed by boredland at 2018-11-28 21:10
  • 6. Allow redirecting from prefetch

    What is accomplished by your PR?

    #195

    Is there something controversial in your PR?

    • router.history is not in the official typings, maybe considered private?
    • The current implementation allows using router.push or router.replace and handles it behind the scenes. Should we rather be more specific in prefetch, something like return Promise.reject({ code: 302, path: '/path-to-redirect-to'});?
    • Do we want to call next in router.beforeResolve on the client side in the case of redirecting or not?
    • How to best document how to use this? Example redirect in a component or rather a how-to in the docs?
    • With the current test setup, I guess we'd need an example implementation to be able to test it with Cypress

    Checklist

    New Feature / Bug Fix

    • [x] Run unit tests to ensure all existing tests are still passing
    • [ ] Add new passing unit tests to cover the code introduced by your PR
    • [ ] Add new documentation for the code introduced by your PR
    Reviewed by xMartin at 2018-07-27 22:43
  • 7. Impossible to run npm run dev

    Describe the bug I'm unable to run scripts from the project.

    To Reproduce Steps to reproduce the behavior:

    1. npx @vuesion/create project-name '...'
    2. After installation finished i ran npm install then npm run dev '....'
    3. [email protected] dev appears then NODE_ICU_DATA=node_modules/full-icu nuxt -o '....'
    4. 'NODE_ICU_DATA' n’est pas reconnu en tant que commande interne ou externe, un programme exΓ©cutable ou un fichier de commandes.

    I also tried to install via git clone then npm install but got same result

    I have Nodejs 17 installed and npm 8.1

    Screenshots Capture

    Reviewed by josaphatim at 2021-10-29 07:33
  • 8. provide multiple themes with a theme-switcher?

    currently, we only have one theme. I think it would be cool to provide at least a dark theme that is used with the new dark theme CSS query selector.

    the best solution would be a white label solution. E.g. you have to set up a project which will be used as a white-label solution.

    Reviewed by devCrossNet at 2019-04-04 17:25
  • 9. feat(storybook): update storybook

    The 5.0.4 version of storybook brings some useful new features:

    1. New design
    2. New canvas toolbar to give quick visual access to addons
    3. overhauled navigation sidebar with a better menu

    In the side panel of storybook, hierarchies of story clusters is not maintained the fix will close the issue --> https://github.com/devCrossNet/vue-starter/issues/369

    What is accomplished by your PR?

    description...

    Is there something controversial in your PR?

    please take a moment to tell us about your choices...

    Link to the Issue

    or a link to a ticket system...

    Checklist

    New Feature / Bug Fix

    • [ ] Run unit tests to ensure all existing tests are still passing
    • [ ] Add new passing unit tests to cover the code introduced by your PR
    • [ ] Change documentation for the code introduced by your PR
    • [ ] Add Story / Design System Page for a new component introduced by your PR
    Reviewed by MohitTilwani15 at 2019-03-24 13:22
  • 10. Unhandled Promise Rejection Warning

    I can't run the project, when I try run the command "npm run dev" I get the following error:

    (node:7832) UnhandledPromiseRejectionWarning: #<Object>
    (node:7832) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)
    (node:7832) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    

    Desktop (please complete the following information):

    • OS: Windows 10
    • Version: v3.2.0
    Reviewed by lariguilger at 2019-05-27 14:52
  • 11. Enable reactivity for vuex store in update operations

    Is your feature request related to a problem? Please describe. Currently, update array or object in vuex store is not reactive.

    Describe the solution you'd like we need to use Vue.set to enable reactivity

    @see https://github.com/vuejs/vuex/issues/1311#issuecomment-397867058

    Reviewed by tamer-mohamed at 2019-02-09 12:10
  • 12. Enable HTTPS

    Hello,

    I want to be able to use https with my site for performance and security purposes, I've seen some examples changing the settings in the config files but so far nothing that could apply to my project, Is this possible? Has anyone tried this in a project using vuesion?

    Reviewed by alecastrillo at 2022-06-23 21:40
  • 13. ERROR Cannot find module 'deepmerge' .

    hello everyone! Just started to play with vuesion and i'm facing a weird issue to deploy on google cloud run. The container is well deployed, the url is generated by cloud run, but the container crash when hitting the url provided by cloud run.

    Reviewed by devCrossNet at 2022-04-25 12:50
  • 14. Fullstack module

    How can we make vuesion the rails for vue.js?

    vision:

    • additional module that enables a Nest.js within a vuesion mono repo
    • Nest.js set up includes: generators, DB for local dev and config set up for prod, GQL support and DB migrations
    Reviewed by devCrossNet at 2022-01-31 10:48
  • 15. sh: cross-env: command not found

    Describe the bug Hello, I am new here. I got error when I follow steps from docs. It wont start.

    To Reproduce Steps to reproduce the behavior:

    1. Run npx @vuesion/create logistik-fe
    2. Run cd logistik-fe
    3. Run npm run dev

    Expected behavior Vuesion Run in my local.

    Screenshots image

    Desktop (please complete the following information):

    • OS: masOS Monterey
    • Browser Google Chrome
    • Version 12.1
    Reviewed by rindibudiaramdhan at 2022-01-19 13:41
  • 16. VueMarkdown throws error

    Describe the bug VueMarkdown component throws Failed to construct 'URL': Invalid URL on click, even without any link inside md content.

    To Reproduce Steps to reproduce the behavior:

    1. Render component with test text
    2. Clic on rendered text
    3. See error

    Expected behavior No error

    Screenshots Capture d’écran 2021-11-19 aΜ€ 12 21 41

    Reviewed by maunoxyd at 2021-11-19 12:27
Build Vue Spa Faster 🍏 πŸ” 🍜
Build Vue Spa Faster 🍏  πŸ”  🍜

iBiu One-stop Vue scaffolding tool δΈ­ζ–‡ζ–‡ζ‘£ηœ‹θΏ™ι‡Œ Windows x64 MAC iBiu was developed based on iView-cli I'd like to thank iView-Cli's developers very much ba

Feb 12, 2021
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Vue Enterprise Boilerplate This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI. Questio

Jun 29, 2022
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Jun 27, 2022
Vue 3 pnpm workspace boilerplate for reusable Components & Composables across a multi-applications setup

Vue 3 and pnpm workspace boilerplate Reuse Components & Composables across multiple Applications Description This boilerplate is to demo a setup where

Jun 23, 2022
Nuxt3-boilerplate - Boilerplate of TailwindCSS v3, Vue 3, Heroicons & HeadlessUI and Nuxt3

Nuxt 3 Minimal Starter with TailwindCSS, Vue3, HeadlessUI & Heroicons We recommend to look at the documentation. Setup Make sure to install the depend

May 11, 2022
Jun 11, 2022
Vue3-ts-boilerplate - Packed Vue3 boilerplate with storybook, unit testing, generators, typescript, pinia, vue-router

Vue3 TS Boilerplate This template should help get you started developing with Vue 3 in Vite. Recommended IDE Setup VSCode + Volar (and disable Vetur).

Mar 10, 2022
Jun 22, 2022
Nuxt3 (Nuxt 3) best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite

Nuxt 3 Starter We recommend to look at the documentation. Preview Deploy your own This starter template also includes: Tailwind CSS v3.0.0-alpha ⚠ Hea

Jul 1, 2022
This boilerplate was developed to help developers build quick eCommerce sites in the Commerce.js ecosystem
This boilerplate was developed to help developers build quick eCommerce sites in the Commerce.js ecosystem

This boilerplate was developed to help developers build quick eCommerce sites in the Commerce.js ecosystem. Included is a complete, unstyled, product listing, cart, and checkout workflow to aid in fast and easy development using the Vue.js framework.

Mar 23, 2022
CION - Design system boilerplate for Vue.js
CION - Design system boilerplate for Vue.js

CION - Design system boilerplate for Vue.js

Jun 23, 2022
Vue front-end boilerplate based on atomic design methodology
Vue front-end boilerplate based on atomic design methodology

Vue Atomic Design Vue front-end boilerplate based on atomic design methodology Main Features I18N Internationalization Page Templates Store modules St

Mar 31, 2022
Nuxt JS + Tailwind CSS boilerplate code with preconfigured libraries and packages
Nuxt JS + Tailwind CSS boilerplate code with preconfigured libraries and packages

A NuxtJs boilerplate by TFD for building scalable API. Nuxt JS + Tailwind CSS + ESLint Boilerplate Features This is a Nuxt JS + Tailwind CSS boilerpla

Jun 16, 2022
nuxt3 boilerplate with tailwind and dynamic routes.

Nuxt 3 Minimal Starter We recommend to look at the documentation.

Jun 22, 2022
Boilerplate of how to use go with echo framework and vuejs (client)

Introduction A simple boilerplate that uses go with echo framework has the backend. The frontend is served via the VueJS. The routes can be served bot

Mar 22, 2022
SPA boilerplate with feathersjs and vuejs

FUE SPA boilerplate with FeathersJS as backend and Vue.js as frontend, stylished by Vuetify Campatible with @feathersjs/cli and @vue/cli Server side a

Apr 7, 2021
This is a boilerplate to use both Vue.js and sql.js together

vuejs-sqljs-boilerplate This is a boilerplate to use both Vue.js and sql.js together Example sqlite db file is in src/assets/mytest.db This will load

Jun 22, 2022
🐩 A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite.
 🐩 A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite.

Vue Starter ?? A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite. Table of Contents Project Setup Key Features Docker

Jun 3, 2022