What is Vuex? Managing state in an application full of components can be difficult. Facebook discovered this the hard way and created the Flux pattern, which is what Vuex is based upon. Vuex is an official plugin for Vue.js which offers a centralized data store for use within your application. Vuex features a unidirectional data flow leading to simpler application design and reasoning. Within a Vuex application, the datastore holds all shared application state.
What is Prototyping? A prototype is an example that serves as a basis for future product like an application etc. Prototyping gives developers an opportunity to research new alternatives and test the existing design / functionality to confirm a product’s all over functionality prior to production. A prototype has many benefits, such as the developer and the implementer getting valuable feedback from the user even before the actual project is started.
What are Web Components? Just like HTML elements like divs, spans, tables etc. Web components are custom HTML elements that can be used and reused in web apps and web pages. Component-based architecture is the main architecture for front end development today. Developers can build custom elements that can be embedded into web pages. The elements can be reused and nested anywhere, allowing for code reuse in any pages or apps.

Vue-storefront is a headless and backend agnostic e-commerce PWA (Progressive Web App). The best part in this is Offline mode, as it managed to do this by making extensive use of the browser cache.

Overview Vuejs composition API is a uniquely designed progressive library that is built on top of JavaScript. This powerful library makes coding easier as it is specially configured to make codes shorter, organised, more readable, approachable etc. For people who have used this powerful tool, you’ll agree that it works pretty well especially looking at how it works with components & their data, methods, computed properties etc. Without a doubt, vuejs latest is pretty much self explanatory especially if you are working with small components that have limited functionality.


Directory Structure
Using External CDN
Deploy on Heroku

Environment Variables and Modes In the previous blog post we saw how to install a project using vue-cli@3 and some essential features. In this feature will see some optional but useful features with vue cli. Environment variables are quite essential to every project. We should put variables like api base url, access keys, secret keys, etc in this and can easily have different values for dev, production etc. Lets see how to do.
In one of our projects we had to explore porting a vue web app to mobile ios/android app. The project budget was small and needed an option to export existing vue to app to mobile without too much overhead. The client wanted to explore the mobile option briefly first before going for a full blown native app. To solve this problem, we tried out Capacitor worked well in our inital tests and we will follow up with a full review later on.
Code splitting is quite an interesting concept and can be used with vue router easily. PS: This an advanced topic, so its important to have a good understanding of vue-router before reading this. Let’s first understand what is the use of code splitting. If we have large project with lot of components and we build via cli the final bundle.js file can become quite large. This can cause issue during first time loading of the page as sometimes the bundle js file might go into mb’s

Vuex is a great tool for state management, but i find that using vuex causes lot of boilerplate code. I will try to explain it in this blog post and will explore a tool called “vuex-map-fields” which i think makes things simpler.

Before going further, its important to realize that vuex-map-fields is only useful for two way data binding of form fields.

VueJS team has recently launched VUE CLI 3.0 which lot of cool features.

In this blog post we will discuss these new features and see how we can implement these in our VueJS projects and some of the best practices to always use in your projects.