Vue.js, Vuex, Vuetify & Nuxt.js

What is Vue.js?

Vue.js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Not just for web interfaces, Vue.js is also used both for desktop and mobile app development with Electron framework. The HTML extension and the JS base quickly made Vue a favored front-end tool, evidenced by adoption by such giants as Adobe, Behance, Alibaba, Gitlab, and Xiaomi.

Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

How to get started with Vue and installation you can directly go to Vue official site Vue.js. In this blog we are going to cover main topics like Plugins, Css, Vuex, Vuetify and Nuxt implementation in Vue.

Vue Ecosystem

It has a rich ecosystem of official core libraries, great developer tooling support, a galaxy of third party plugins, developer tutorials and a matured ecosystem of related component frameworks, such as Vuetify, BootstrapVue, Element, Quasar, NativeScript-Vue , Nuxt.js, VuePress and many more which you may want to pick and choose based on the needs of your application.

Some of the core libraries maintained by Vue team are as follows with their links.

Vue Router (https://router.vuejs.org/)
Vuex (https://vuex.vuejs.org/)
Vue Loader (https://vue-loader.vuejs.org)
Vue Server Renderer (https://ssr.vuejs.org/)
Vue Test Utils (https://vue-test-utils.vuejs.org/)
Vue Dev-Tools (https://github.com/vuejs/vue-devtools)
Vue CLI (https://cli.vuejs.org/)

Directory Structure of Vue CLI

Given below is the directory structure of the Vue CLI project which mainly contain:

/rootFolderName/public
/rootFolderName/src
/rootFolderName/rootFiles mentioned in the image

Directory Structure of Vue & Nuxt

Given below is the directory structure of the Vue & Nuxt project which mainly contain:

/rootFolderName/src
/rootFolderName/rootFiles mentioned in the image

Vue.js File

Vue.js code file mainly contain three section:

<template>: This section contain all template/design layer of code
<script>: This section contain all scripts and functionality required to manipulate data or to perform actions on component click etc.
<style>: This section contain styling of the page or template.

Code representation in vue.js file is given in the below screenshot:

Helpers in Vue

It’s a good practice to have a helpers folder in any web app project. In this folder, you put files containing utility functions regarding a specific topic. For example, it may be string helpers with capitalize, normalize or dasherize functions or date manipulation. Thereby we do not need to define these type of functions again and again on each page, we can simply put common functions inside /src/helpers/helperFileName and can access them globally in the current project folder anywhere requried.

How to use Helpers in Vue?

follow the following steps to use helpers in Vue

Create a helper filer inside /src/helpers folder for e.g. string-helpers.js and write functions inside this file like in a below screenshot -
Now use this helpers whenever it is required just by importing the helper file in the file you want to use it like -

Generic Component in Vue

Generic/Reusable components are those Vue components that can be used multiple times in your application. As a result, they need to be generic enough so that it's free from complex business logic.

Like React we can also create generic components in Vue and pass props in them to use vue code more efficiently and effectively.

We can create generic component inside /src/components folder and import them inside /src/pages or in any template we want to use them inside our project directory.

Following steps needs to be followed to create and use generic component in vue:

Create a new file inside /src/components and named it as genericButton.vue
Now add template for this component and props we required as below (genericButton.vue)
Now use this genericButton inside page or another component here we are going to use this inside /src/pages created a new file named as display.vue & import the genericButton.vue from /src/components/genericButton.vue like as below (display.vue)

Plugins in Vue

Vue plugins are a powerful but simple way to add global features to your app. There are plenty of plugins available in Vue which can be useful to add global-level functionality.

How to add 3rd party plugin in Vue-CLI?

If you are making an application using pure vue.js that is Vue CLI then you need to follow the following steps to add 3rd party plugins:

1. Install plugin using npm i <pluginName>

2. Add plugin inside the /src/plugins folder please check the screenshot for reference

3. Import all plugins you want to use inside main.js file which is inside of /src/main.js

4. Now you can use this plugin globally anywhere in the component or pages just by importing and using component mentioned in the plugin file. For e.g.

How to add 3rd party plugin in Nuxt?

If you are making an application using vue and nuxt framework then you need to follow the following steps to add 3rd party plugins:

1. Step 1 & 2 are same as CLI

3. Add all plugins inside the /rootFolderName/nuxt.config.js please refer the screenshot

4. Now you can use this plugin globally anywhere in the component or pages just by importing and using component same as in step 4 in CLI

Note: In Nuxt You can also use the object syntax with the mode property ('client' or 'server') in plugins

Plugins Available in Vue

Some of the useful 3rd party plugins available in vue

animate.css It is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
vue-apexcharts It is a wrapper component for ApexCharts ready to be integrated into your vue.js application to create stunning Vue Charts.
vue-echart It is a wrapper for eCharts to allow it to work in the Vue environment.
moment Parse, validate, manipulate, and display dates in JavaScript with moment package, this component provide you the handy moment.js filter to use in your vue.js project.
vue2-google-maps It comes with a well-rounded set of components for interacting with Google Maps as well as two-way data binding
vue-gtag The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform
vue-head Manipulating the meta information of the head tag, a simple and easy way.
vue-i18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application
vue-shortkey Accepts shortcuts globally and in a single listener. Easy keyboard shortcuts.
vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.
vuex-persist A Typescript-ready Vuex plugin that enables you to save the state of your app to a persisted storage like Cookies or localStorage.
vue-axios A small wrapper for integrating axios to Vuejs CLI
@nuxtjs/axios A secure and easy integration of axios in Nuxt
firebase The Firebase JavaScript SDK implements the client-side libraries used by applications using Firebase services
vee-validate Form Validation for Vue.js

How to Use CSS in Vue

Like in other UI framework react, angular etc. we can use Internal, Inline, and External CSS in Vue as well.

1. Inline CSS : To use inline CSS we gave the following tag:

<v-list-item class="pl-10 pr-10" style="height: 50px;">

2. Internal CSS : To use internal CSS we have the following tag :

Note: Using <style> tag we can modify other component CSS using their CSS class and scoped is used to make the CSS changes internal only otherwise it will be impacted globally if we will change a component CSS for one page and same component is using in other page.

    <style scoped>

     .v-data-table td, .v-data-table th {

        padding: 0 16px !important;

}

   </style> 

Here v-data-table is a vuetify component and if we make any change in this component CSS without using scoped it will be reflected in all other pages as well wherever v-data-table is used.

Another important point to be remembered whenever we use inline CSS to modify the existing CSS class of the component like Vuetify components we need to used the Extraction operator >>> before the class if that class is not a parent class of the component and if CSS changes not reflected on page.
For e.g.

      >>>.v-data-table-header {

        color: white;

        border-radius: inherit;

}

   </style> 

Here v-data-table-header is the sub class of the v-data-table,

thereby direct CSS may not be reflected.

3. External CSS : To define global CSS in Vue we need to follow the following steps -

Create a new folder inside /src/assets/ named it as css or scss/sass whatever styling you are using for better naming convention.
Create a .css, .scss, or .sasss file inside the newly created folder and define all styling do you want to use globally. For e.g. in the given screenshot we are using scss files and all files are imported inside the main scss file which is theme.scsss here.
Note: We can overrides existing component style and add on additional library variables for the same for e.g. here we are using Vuetify components.

Variable Style File

Overrides Style File

Main Style File
Now we need to config style for global access for that we have different approaches which is based on that are we using Vue CLI or Nuxt?.
I. In Vue CLI - Import variables inside vue.config.js & import main theme scss inside main.js

vue.config.js

main.js

II. In Nuxt - Both variables and main theme scss loaded inside nuxt.config.js

nuxt.config.js

Difference between CSS, SASS and SCSS

CSS is the most important web technologies that are widely used along with HTML and JavaScript. CSS have file extension of .css;

Sophisticated.
Works with Integration with HTML.
It consist declarative and selective block where dilaceration consist of semicolon
It does not allow use of variable like in sass and scss.
Example of Css

SASS: Sass is derived from another pre-processor known as Haml. It was designed and written by Ruby developers so;

It syntax is similar to ruby.
Here no uses of braces.
No strict indentation
No semi-colons
Variable sign in sass is ! instead of $.
Assignment sign in sass is = instead of :
Example of sass

SCSS provides the CSS friendly syntax to closing the gap between Sass and CSS. So;

It syntax is similar to CSS.
Here we uses of braces.
Use semi-colons
Variable sign in scss is $.
Assignment sign in scss is :
Example of scss

What is Vuex?

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. In other words Vuex is one of the Vue js’s model implementation, or we can say State of our data representation.

It is a self-contained app with the following parts:

The state, which is the source of truth that drives our app;
The view, which is just a declarative mapping of the state;
The actions, which are the possible ways the state could change in reaction to user inputs from the view.

State: Vuex Store is Singleton source of State. Our store contains application state. State management in VueJS with Vuex is straightforward. You just need to modify the state via dispatching the action and not directly because we want to predict the future states. Our store contains application state.

Mutations: The only way to change the state in a Vuex store is by committing a mutation. We can directly change the state, but we will not do it because we need a snap shot for every step of our project. We need to predict the next state. For the debugging purpose, we will not mutate the state directly, but via mutations.

Actions: Actions are similar to mutations, the differences being that :

Instead of mutating the state, actions commit mutations.
Actions can contain arbitrary asynchronous operations,

How to use Vuex in Vue?

In Vue CLI: You need to install the Vuex to the app Click here to know more.
In Nuxt: The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store Click here to know more.

What is Vuetify?

Vuetify is a complete UI framework built on top of Vue.js. The goal of the project is to provide developers with the tools they need to build rich and engaging user experiences. Unlike other frameworks, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification

Vuetify takes a mobile first approach to design which means your application just works out of the box—whether it’s on a phone, tablet, or desktop computer.

To know more about how to install and use vuetify in your project please click here

It is handy to use vuetify components inside existing/new project with help of guide available on vuetify website which provides the following content related to the each component:

Usage and Examples: In this you can check the component usage with different examples
API: In this you can access all Props, Sass Variables, Events, and Slots are available related to the particular component.

Props: are the properties we can pass in a particular component to enable/add or disable/remove some functionality for e.g.

<v-btn fab dark x-small>

<v-icon dark>mdi-plus</v-icon>

</v-btn>

Note: Here fab, dark, x-small are the props of v-btn.

Slots: are a mechanism for Vue components that allows you to compose your components in a way other than the strict parent-child relationship. Slots give you an outlet to place content in new places or make components more generic. for e.g.

Note: v-slot can be used with any component available in Vuetify to add on or mutate existing template of the component.

Events: are the actions we can perform on click, change , input etc. of the components for e.g.

 <v-chip 
   label 
   small 
  @click="createNewTag(search)"
>
    {{ search}}
 </v-chip>

Note: @click even will be fired when user clicked on the chips and called the createNewTag(search) method to search for the new tag and print the created tag on chips {{search}} by using variable search.

Sass Variables: are the sass styling variables which can be modified too and their default values by using external styling.

for e.g. /assests/sass/main.sass $body-font-family: 'Work Sans', serif;

Note: Please check External CSS point 3 to use main.sass variable file inside CLI or NUXT

What is NUXT?

Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js. Its goal is to help Vue developers take advantage of to-notch technologies, fast, easy and in an organized way.

How to setup Nuxt?

To setup nuxt.js inside your vue.js project please click here . You can setup nuxt by using yarn or npm and set it's default nuxt.config.js file after the setup has been completed.

Features of Nuxt?

Server-side rendered sites are rendered on the server each time the user requests a page, therefore a server is needed to be able to serve the page on each request.
Static sites are very similar to server-side rendered applications with the main difference being that static sites are rendered at build time, therefore no server is needed. Navigating from one page to another is then on the client-side.
Client side rendering only there is no server-side rendering. Client side rendering means rendering the content in the browser using JavaScript. Instead of getting all of the content from the HTML we just get a basic HTML document with a JavaScript file that will then render the rest of the site using the browser. For client side rendering set ssr to false in nuxt.config.js file.
Data Fetching Nuxt.js supports traditional Vue patterns for loading data in your client-side app, such as fetching data in a component's mounted() hook. Universal apps, however, need to use Nuxt.js-specific hooks to be able to render data during server-side rendering. This allows your page to render with all of its required data present.

Nuxt has two hooks for asynchronous data loading:

I. The fetch hook (Nuxt 2.12+). This hook can be placed on any component, and provides shortcuts for rendering loading states (during client-side rendering) and errors.

II. The asyncData hook. This hook can only be placed on page components. Unlike fetch, this hook does not display a loading placeholder during client-side rendering: instead, this hook blocks route navigation until it is resolved, displaying a page error if it fails.
Static Hosting statically render your Nuxt.js application and get all of the benefits of a universal app without a server. The nuxt generate command will generate a static version of your website. It will generate HTML for every one of your routes and put it inside of its own file in the dist/ directory. This improves performance as well as SEO and better offline support.
Server Hosting is server-side rendering also known as SSR means that your page is rendered on the server when it is requested by the user. When the user opens your page in a browser the browser sends a request to the server requesting that page. The page is rendered on the server and sent back to the browser with all its content.
File System Routing Nuxt.js automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory. When you create a .vue file in your pages directory you will have basic routing working with no extra configuration needed.
Meta tags and SEO Nuxt.js gives you 3 different ways to add meta data to your application:

I. Globally using the nuxt.config.js

II. Locally using the head as an object
III. Locally using the head as a function so that you have access to data and computed properties
Configuration by default, Nuxt.js is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file.
Loading Nuxt.js gives you its own loading progress bar component that's shown between routes. You can customize it, disable it or even create your own loading component.
Component Nuxt.js comes with a few important components included out of the box, which will be helpful when building your application. The components are globally available, which means that you don't need to import them in order to use them for e.g. <Nuxt/>.
Transitions Nuxt.js uses the transition component to let you create amazing transitions or animations between your routes. To define a custom transition for a specific route adds the transition key to the page component.
Preview Mode With Nuxt.js and full static you can now use live preview which will call your API or your CMS so you can see the changes live before deploying.

Some important Nuxt configurations are given below in the screenshot (nuxt.config.js) -

Miscellaneous Topics

To know more about Vue.js please check out the folowing links:

Vue Lifecyle - https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle
Vue Best Framework - https://madewithvuejs.com/blog/the-best-vue-js-frameworks
Vue Component Libraries - https://athemes.com/collections/vue-ui-component-libraries/

Search This Blog

All About Vue.js