A Vue.js 3.0 full project starter template including best practices for code styling, testing, and building. Also incorporates the (soon to be released) Composition API.
Fork, download, or clone this repository and use it as a starting point for your next Vue.js project.
This repository features 3 components which function almost identically, but leverage the new Composition API in different ways.
- Counter.vue - This is the most basic way of building a component with the new Composition API. Our state is entirely managed in the component itself, and we don't use Vuex or other state management plugins.
- CounterVuex.vue - This component performs the same function as the basic
Counter.vue, except it uses a Vuex store for global state management. That means that even when leaving the page/route that hosts this component, the data is still persistent in the store. Unlike the basicCounter.vue, the number in the counter will not be reset to 0 every time we load this component. - CounterVuexHooks.vue - This component functions identically to the
CounterVuex.vuecomponent, but it modularizes the code a bit more with the use of the code in the hooks folder. This allows us to abstract and modularize our functions in such a way that they can be used in multiple components, without re-writing the functions on every component. It also cleans up and truncates the<script>code which lives inside of the Vue component itself.
- AirBnB Style Guide
- Prettier Style Guide
- Jest (Unit Testing)
- ESLint (Style Enforcing)
- Composition API
The following commands are used to develop the project:
npm run build- Build the package distribution bundle.npm run serve- Start a development server with live-reloading on changes. (Used for previewing individual components.)npm run lint- Lint code using ESLint and Vue, AirBnB, and Prettier configs.npm run test:unit- Run unit tests for the individual components in the package.