Vue.js Interview Questions

Vue Loader's configuration is a bit different from other loaders by adding Vue Loader's plugin to your webpack config. The vue loader plugin is required for cloning any other rules(js and css rules) defined and applying them to the corresponding language blocks(<script> and <style>) in .vue files.

For example, the simple demonistration of webpack configuration for vue loader would be as below,

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain `.js` files and `<script>` blocks in `.vue` files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain `.css` files and `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
// make sure to include the plugin for cloning and mapping them to respective language blocks
new VueLoaderPlugin()
]
}

Below are the list of Asset URL transform rules

1. Absolute path: If the URL is an absolute path (for example, /images/loader.png)then it will be preserved as-is.
2. Relative path: If the URL starts with . (for example, ./images/loader.png) then it will be interpreted as a relative module request and resolved based on the folder structure on your file system.
3. URLs starts with ~ symbol: If the URL starts with ~ symbol(for example, ./some-node-package/loader.png) then it is interpreted as a module request. This way it can reference assets inside node modules too.
4. URLs starts with @ symbol: If the URL starts with @ symbol then it is interpreted as a module request. This is useful if your webpack config has an alias for @, which by default points to /src path.

Vue-loader will automatically infer the proper loaders to use based on the lang attribute of a language block and the rules defined in webpack config. You can use pre-processors such as SASS,LESS, Stylus and PostCSS using vuejs loader.

Scoped CSS is a mechanism in VueJS Single File Components(SFC) that prevents styles from leaking out of the current component and affecting other unintended components on your page. i.e, When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only. It uses PostCSS to transform scoped css to plain CSS.

Let's take an example usage of scoped css,

<style scoped>
.greeting {
color: green;
}
</style>

<template>
</template>

The above code will be converted to plain CSS,

 <style scoped>
.greeting[data-v-f3f3eg9] {
color: green;
}
</style>

<template>
</template>

Yes, you can include both scoped and non-scoped styles in the same component. If you don't mention scoped attribute then it will become global style.

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

In scoped css, if you need to modify the styles of a child component using deep selectors(i,e from parent scoped css) then you need to use >>> combinator.

For example, the scoped deep selector on parent scoped css would be as below,

<style scoped>
.class1 >>> .class2 { /* ... */ }
</style>

It will be converted as,

.class1[data-v-f3f3eg9] .class2 { /* ... */ }

Note: If you preprocessors such as SASS then it may not be able to processs >>> properly. In such cases use the /deep/ or ::v-deep combinator instead >>> combinator.

The parent component's styles will not leak into child components. But a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. i.e, your child component's root element has a class that also exists in the parent component, the parent component's styles will leak to the child. Anyway this is by design so that the parent can style the child root element for layout purposes.

For example, the background color property of parent component leaked into child component as below,

//parent.vue

<template>
<ChildMessageComponent/>
</template>

<script>
import ChildMessageComponent from "./components/child";

export default {
name: "App",
components: {
ChildMessageComponent
}
};
</script>
<style scoped>
.wrapper {
background: blue;
}
</style>

//child.vue

<template>
</template>

<script>
export default {
name: "Hello, Scoped CSS",
};
</script>
<style scoped>
.wrapper {
background: red;
}
</style>

Now the background color of child wrapper is going to be blue instead red.

The scoped css style doesn't impact v-html directive's dynamically generated content. In this case, you can use deep selectors to solve this styling issue.

Yes, vue-loader provides first-class integration with CSS Modules as an alternative for simulated scoped CSS.

No, templates (or any Vue-specific HTML) are ONLY allowed in .vue files and render functions are required in other cases.

Below are the steps to use css modules in VueJS,

1. Enable CSS modules: CSS Modules must be enabled by passing modules: true option to css-loader

// webpack.config.js
{
module: {
rules: [
// ... other rules omitted
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// enable CSS Modules
modules: true,
// customize generated class names
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}

2. Add module attribute: Add the module attribute to your <style>

<style module>
.customStyle {
background: blue;
}
</style>

3. Inject CSS modules: You can inject CSS modules object with computed property $style

<template>
Background color should be in blue
</template>

It can work with object/array syntax of :class binding.

Yes, you can use preprocessors with CSS Modules.

For example, sass-loader can configured in webpack file for sass preprocessor.

// webpack.config.js -> module.rules
{
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: { modules: true }
},
'sass-loader'
]
}

You can customize the name of the injected computed property by giving the module attribute a value. This will be helpful to avoid overwriting injected styled if you have more than one <style> tags in a single *.vue component.

For example, you can use module attribute as below,

<style module="a">
/* identifiers injected as a */
</style>

<style module="b">
/* identifiers injected as b */
</style>

Hot reloading is not about reloading the page when you edit any .vue file. Instead, when you edit a *.vue file, all instances of that component will be swapped in without reloading the page. It improves the development experience when you are tweaking the templates or styling of your components.

Hot Reload is always enabled except below situations:

1. webpack target is node (SSR)
2. webpack minifies the code
3. process.env.NODE_ENV === 'production'