Vue.js Interview Questions

You can use hotReload: false option to disable the Hot Reload explicitly.

It can be configured as below,

module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
hotReload: false // disables Hot Reload
}
}
]
}

The vue loader plugin internally uses hot reloading. If you are scaffolding project with vue-cli, hot reloading comes out of the box but if you are manually setting up the project then hot reloading is enabled by default with webpack-dev-server --hot command.

Below are the state preservation rules in hot reloading,

1. When editing the <template> of a component, instances of the edited component will re-render in place, preserving all current private state.
2. When editing the <script> part of a component, instances of the edited component will be destroyed and re-created in place.
3. When editing the <style> hot reload operates on its own via vue-style-loader without affecting application state.

You can create functional components by adding functional attribute to template block,

<template functional>
</template>

If you need to access properties defined globally on Vue.prototype then you can access them on parent,

<template functional>
</template>

You can perform testing in two ways,

1. Using vue-cli: It offers pre-configured unit testing and e2e testing setups
2. Manual setup: You can manually setting up unit tests for *.vue files using either mocha-webpack or jest

The stylelint linter supports linting style parts of Vue single file components. You can run linter on particular vue file as below,

stylelint MyComponent.vue

Other option is configuring stylelint-webpack-plugin in webpack. It can be configured as a dev dependency.

// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ... other options
plugins: [
new StyleLintPlugin({
files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
})
]
}

The official eslint-plugin-vue supports linting both the template and script parts of Vue single file components. You can configure plugin in your ESLint config,

// .eslintrc.js
module.exports = {
extends: [
"plugin:vue/essential"
]
}

You can run linter on particular component as below,

eslint --ext js,vue MyComponent.vue

You can use eslint-loader for *.vue files in order to automatically linted on save during development. It can be installed as npm module,

npm install -D eslint eslint-loader

After that you need to add it as pre-loader,

// webpack.config.js
module.exports = {
// ... other options
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
}
}

CSS Extraction is used to extract all the processed CSS in all Vue components into a single CSS file. For webpack4, you need to install below npm command,

npm install -D mini-css-extract-plugin

You can configure this plugin in webpack as below,

// webpack.config.js
var MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
// other options...
module: {
rules: [
// ... other rules omitted
{
test: /\.css$/,
use: [
process.env.NODE_ENV !== 'production'
? 'vue-style-loader'
: MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
// ... Vue Loader plugin omitted
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
}

You can define custom language blocks inside *.vue files based on the lang attribute of the block, the block's tag name, and the rules in your webpack config. You can also use resourceQuery to match a rule against a custom block with no lang.

For example, to match against <message> custom blocks.

{
module: {
rules: [
{
resourceQuery: /blockType=message/,
loader: 'loader-to-use'
}
]
}
}

Below are the list of major stylelint features

1. It has more than 160 built-in rules to catch errors, apply limits and enforce stylistic conventions
2. Understands latest CSS syntax including custom properties and level 4 selectors
3. It extracts embedded styles from HTML, markdown and CSS-in-JS object & template literals
4. Parses CSS-like syntaxes like SCSS, Sass, Less and SugarSS
5. Supports Plugins for reusing community plugins and creating own plugins

Vuex enforces below rules to structure any application.

1. Application-level state is centralized in the store.
2. The only way to mutate the state is by committing mutations, which are synchronous transactions.
3. Asynchronous logic should be encapsulated in, and can be composed with actions.

The project structure for any non-trivial application would be as below,

Yes, vuex supports hot-reloading for mutations, modules, actions and getters during development. You need to use either webpack's hot module replacement API or browserify's hot module replacement plugin.

The store.hotUpdate() API method is used for mutations and modules.

For example, you need to configure vuex store as below,

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import myModule from './modules/myModule'

Vue.use(Vuex)

const state = { message: "Welcome to hot reloading" }

const store = new Vuex.Store({
state,
mutations,
modules: {
moduleA: myModule
}
})

if (module.hot) {
// accept actions and mutations as hot modules
module.hot.accept(['./mutations', './modules/newMyModule'], () => {
// Get the updated modules
const newMutations = require('./mutations').default
const newMyModule = require('./modules/myModule').default
//swap in the new modules and mutations
store.hotUpdate({
mutations: newMutations,
modules: {
moduleA: newMyModule
}
})
})
}