VueJS booster template is a boilerplate that has simple features that make it really easy to start new projects.
Vue CLI makes starting a Vue project simple -
vue create demo
This sets up everything that you need to start - but just so. There are more than few things missing for a functioning/easy-to-use project :)
The Case for a New Boilerplate
I take my role as a developer with every bit of smartness inherent in me. The problems faced with my back-end projects and my simple solution, booster project in AdonisJS, are very relevant to VueJS and other front-end experiments.
In essence, I copy old projects to create something new to keep things as productive as possible.
Ignoring the philosophical implications of doing such a thing, there is this recurring problem of -
- Removing parts that are not relevant
- Removing complexity for small/simple projects
- Staying consistent to standards and practices
- Trying to get all these messages to new developers (they exist and I don’t like talking to them overnight to get them started)
So it is that I created another simple starter template for VueJS that is useful to beginners and simple projects.
The idea is to keep things painfully simple and allow users to change as and when they need more complexity.
Here’s presenting vue-vuetify-api-boost.
What does the starter template contain?
The standard set of components of this starter project/ boilerplate provide a consistent and standard experience while starting new projects. It consists of -
- Standard front-end library - Vuetify is used in this boilerplate
- Consistent way of dealing with Vuex - Pathify FTW
- Standard practices for them pesky API calls
- Some screens to help get started
We use the below standard features of Vue CLI-
- Vue + Vuex + Vue Router
- Node SaSS
The major additional packages beyond those installed by Vue CLI installed -
vuetify: the most popular Vue styling library
axios: API calls
vuex-persist: Persist vuex to local storage and cookies (using
vue-html-to-paper: allow pretty printing of pages (no example pages)
file-saver: Save files being downloaded from server (no example pages)
vue2-dropzone: Drop files to upload (no example pages)
v-tooltip: Tooltips that don’t need a 100 lines to implement
prerender-spa-plugin: pre-render pages without selling your soul
- Registration and login pages
- Router setup with protected routes, and dynamically loaded components
- Default and standard layouts for list and detail views (of a CRUD application)
- A sample
Service Requestentity that demonstrates how fetch/insert/update work
The structure is plain and simple.
Views and components
UI elements are like any other project. We use Vuetify for styling!
Layouts exist in a separate folder under components. Every view starts with a layout and utilises the slots provided by layout to paint the pretty picture.
There is a single mixin that provides validations and a few utilities used across the board. You have to import the mixin in every component you use. It is deliberately not included for the entire app - though you could do that.
Router is as simple as they come. It dynamically imports most components to avoid front-loading every single component at start-up.
It also provides protected routes and dynamic component loading in a couple of cases.
store/*themselves. They can be segregated into separate files if projects become too complex
- There is no distinct
servicelayer. I understand (and agree to) the arguments to keep business logic separate from
vuexlogic, but I don’t use those in simpler projects.
vuex-pathifytakes care of all mutations - so, few mutations are hand-written
Using the boilerplate
Clone this repository to start..
git clone https://github.com/techformist/vue-vuetify-api-boost
Install packages -
cd vue-vuetify-api-boost npm i
Setup like any other Vue project.
- Add/ change views and components
- Change layouts
- .. and more
Compile with hot-reload for development
npm run serve
Voila, we have this super screen :)
You can continue using Vue CLI with this project.
Back-end Partner Projects
The template runs without issues out-of-the-box with the following projects in back-end -
- Vue Enterprise Boilerplate: for large projects / teams
None of the additional packages or features in the starter template add anything significantly new, but required at least a day to set everything up.
Hopefully, we continue optimising the start-up time for our projects and eliminate more boring tasks required at the very beginning of a project. And.. add even more stuff useful to ourselves and anyone else who bothers picking up this boilerplate amongst a million other (better) templates available on the Internet.