trendingtechnology / vue-starter

an enterprise ready boilerplate for isomorphic, progressive web apps with Vue.JS

vue-starter

an enterprise ready boilerplate for isomorphic, progressive web apps with Vue.JS

Live demo

If you want to see a preview before you decide for this starter, please visit the vue-starter app on heroku!

Features

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.

Getting started

1. Install Node.js 8.7.x or higher. Use nvm to maintain multiple Node.js versions
2. Install npm version 5.4.x or higher
3. clone repository git clone https://github.com/devCrossNet/vue-starter
4. Install dependencies: npm install
5. Run npm run dev. The server runs on port 3000 by default, set PORT environment variable to configure a different port

Documentation

• npm tasks
• generator CLI
• style guide
• i18n
• vuex and vuex-persist
• components

FAQ

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.

Sponsors

Reference resources

• React Boilerplate
• vue-ssr-starter-kit
• Angular
• vue-enterprise-boilerplate

License

MIT