vue-template - Nice approaches to use in VueJS projects ❤️

Hi, everyone! 👋

This is a nice repo with some approaches to use in VueJS (2.x | 3.x) projects.

If you wanna, let's get in touch!

Summary

• Approaches

1. Creating breadcrumb
2. Creating multi layouts on Vue SPAs
3. Loading application smartly
4. Making async/lazy load of components

• Config

2. Pre-requirements

Breadcrumb

Here, you will find two approaches to creating breadcrum with VueJS and VueRotuer, the first idea is to create keys at route config and treat it in breadcrumb itself. Regarding secondapproach, the idea is to create a breadcrumb state and change it at route changing.

• Seeing codebase here
• You can see the PR with key files here
• You can also watch a video about it here 🎥

Multi Layouts

Useful case - article

Loading application smartly - Global data

Sometimes do you have problems with async global information, including using this information in another async request? This approach might help you!

• Seeing codebase here
• You can see the PR with key files here
• You can also watch a video about it here 🎥

Making async/lazy load of components

Once the application gets huge, keep it with good performance is one of the most challenging. A good approach that helps us is to create small chunks and get them smartly. Getting components async/lazy and choose the right moment to do it can help us a lot. vue-cli (using behind the scenes Vue and webpack) give us a nice approach to delay some chunks and reuse them when they are called in more than one place.

• Seeing codebase here
• You can see the PR with key files here
• You can also watch a video about it here 🎥

Installation

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint