an enterprise ready boilerplate for isomorphic, progressive web apps with Vue.JS
If you want to see a preview before you decide for this starter, please visit the vue-starter app on heroku!
Quick scaffolding
Create components, connected components, modules - and their tests - right from the CLI!
Instant feedback
Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and TypeScript are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!
SEO (with vue-meta)
We support SEO (document head tags management) and server-side-rendering for search engines that support indexing of JavaScript content. (eg. Google)
Progressive-Web-App
Offline-first support with service-workers and a lighthouse score as high as possible (for me - 90+).
Enterprise ready
Common style guide, TypeScript and the best test setup: Automatically guarantee code quality and non-breaking changes.
Animations (with anime.js)
A stable animations set up already included.
Components
A flexible component library that'll be extended over time.
Storybook
Storybook for Vue is a UI development environment for UI components. It allows interactive development, testing and sharing of UI components in various property states.
Industry-standard i18n internationalization support
Scalable apps need to support multiple languages, easily add and support multiple languages with vue-i18n.
Predictable state management
Centralized State Management with vuex.
Routing with data prefetching
Server-side-rendering of prefetched data and transferring state from server to client.
Configuration
Default configuration is stored in /src/app/config/default.json, which can get overridden by providing valid JSON in the environment variable CONFIG on application startup or by an environment specific file.
For instance, in order to set a custom API endpoint, run CONFIG='{"api":{"baseUrl": "http://custom.api.endpoint/"}}' npm run start. Check documentation of config module.
- Install Node.js 8.7.x or higher. Use nvm to maintain multiple Node.js versions
- Install npm version 5.4.x or higher
- clone repository
git clone https://github.com/devCrossNet/vue-starter - Install dependencies:
npm install - Run
npm run dev. The server runs on port3000by default, setPORTenvironment variable to configure a different port
Why should I use this boilerplate over vue-cli or nuxt.js? This boilerplate is opinionated, aiming to educate and empower users to essentially configure their own framework, ideally suited to their needs. It also includes as less libraries as possible to keep you flexible and to enable you to implement every product requirement that comes down the road.
Use cases for this boilerplate:
- The requirements for the product might change and you want to maintain maximum flexibility and control.
- You'd like to focus on developing skills that will transfer across any Vue project.
- You're working in a large team, so need tooling to help everyone avoid common mistakes, write in a consistent style, and avoid bikeshedding in PRs.
