106. What are asset url transform rules?
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.
107. How do you work with preprocessors using vue loader?
`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.
108. What is scoped CSS?
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,
```javascript
<style scoped>
.greeting {
color: green;
}
</style>
<template>
<div class="greeting">Let's start Scoped CSS</div>
</template>
```
The above code will be converted to plain CSS,
```javascript
<style scoped>
.greeting[data-v-f3f3eg9] {
color: green;
}
</style>
<template>
<div class="greeting" data-v-f3f3eg9>Let's start Scoped CSS</div>
</template>
```
109. Is it possible to mix both local and global styles?
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.
```javascript
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
```
110. How do you use deep selectors?
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,
```javascript
<style scoped>
.class1 >>> .class2 { /* ... */ }
</style>
```
It will be converted as,
```javascript
.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.
111. Is parent styles leaked into child components in scoped css?
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
```javascript
<template>
<div class="wrapper">
<p>parent</p>
<ChildMessageComponent/>
</div>
</template>
<script>
import ChildMessageComponent from "./components/child";
export default {
name: "App",
components: {
ChildMessageComponent
}
};
</script>
<style scoped>
.wrapper {
background: blue;
}
</style>
```
//child.vue
```javascript
<template>
<div class="wrapper">
<p>child</p>
</div>
</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.
112. How do you style dynamic generated content using scoped css?
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.
113. Is CSS modules supported in Vuejs?
Yes, vue-loader provides first-class integration with CSS Modules as an alternative for simulated scoped CSS.
114. Can I use runtime builds for all templates?
No, templates (or any Vue-specific HTML) are ONLY allowed in .vue files and render functions are required in other cases.
115. How to use CSS modules in vuejs?
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
```javascript
// 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>`
```javascript
<style module>
.customStyle {
background: blue;
}
</style>
```
3. ** Inject CSS modules:** You can inject CSS modules object with computed property $style
```javascript
<template>
<div :class="$style.blue">
Background color should be in blue
</p>
</template>
```
It can work with object/array syntax of :class binding.
116. Can I use CSS modules for preprocessors?
Yes,You can use preprocessors with CSS Modules. For example, sass-loader can configured in webpack file for sass preprocessor.
```javascript
// webpack.config.js -> module.rules
{
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: { modules: true }
},
'sass-loader'
]
}
```
117. Is it possible to use custom inject name for CSS modules?
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,
```javascript
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
```
118. What is hot reloading in vue loader?
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.
119. What is the default behavior of hot reloading?
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'
120. How do you disable hot reloading explicitly?
You can use `hotReload: false` option to disable the Hot Reload explicitly. It can be configured as below,
```javascript
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
hotReload: false // disables Hot Reload
}
}
]
}
```
121. How do you use hot reloading?
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.
122. What are state preservation rules in hot reloading?
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.
123. How to create functional components using vue loader?
You can create functional components by adding functional attribute to template block,
```javascript
<template functional>
<div>{{ props.msg }}</div>
</template>
```
124. How do you access global properties of functional components?
If you need to access properties defined globally on `Vue.prototype` then you can access them on parent,
```javascript
<template functional>
<div>{{ parent.$someProperty }}</div>
</template>
```
125. How do you perform testing in vuejs?
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
126. How do you apply linting for css?
The stylelint linter supports linting style parts of Vue single file components. You can run linter on particular vue file as below
```javascript
stylelint MyComponent.vue
```
Other option is configuring stylelint-webpack-plugin in webpack. It can be configured as a dev dependency.
```javascript
// 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}'],
})
]
}
```
127. How do you use eslint plugin?
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,
```javascript
// .eslintrc.js
module.exports = {
extends: [
"plugin:vue/essential"
]
}
```
You can run linter on particular component as below,
```javascript
eslint --ext js,vue MyComponent.vue
```
128. What is the purpose of eslint loader?
You can use `eslint-loader` for *.vue files in order to automatically linted on save during development. It can be installed as npm module,
```javascript
npm install -D eslint eslint-loader
```
After that you need to add it as pre-loader,
```javascript
// webpack.config.js
module.exports = {
// ... other options
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
}
}
```
129. What is CSS extraction?
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,
```javascript
npm install -D mini-css-extract-plugin
```
You can configure this plugin in webpack as below,
```javascript
// 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'
})
]
}
```
130. What are custom blocks?
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.
```javascript
{
module: {
rules: [
{
resourceQuery: /blockType=message/,
loader: 'loader-to-use'
}
]
}
}
```
131. What are the features of stylelint?
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
132. What are the principles for vuex application structure?
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,
<img src="https://github.com/sudheerj/vuejs-interview-questions/blob/master/images/vuex-app-structure.png" width="700" height="500">
133. Is Vuex supports hot reloading?
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.
134. What is the purpose of hotUpdate API of vuex store?
The store.hotUpdate() API method is used for mutations and modules. For example, you need to configure vuex store as below,
```javascript
// 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
}
})
})
}
```
135. How do you test mutations?
Since mutations are just functions that completely rely on their arguments it will be easier to test. You need to keep mutations inside your store.js file and should also export the mutations as a named export apart from default export.
Let's take an example of increment mutations,
```javascript
// mutations.js
export const mutations = {
increment: state => state.counter++
}
```
And test them using mocha and chai as below,
```javascript
// mutations.spec.js
import { expect } from 'chai'
import { mutations } from './store'
// destructure assign `mutations`
const { increment } = mutations
describe('mutations', () => {
it('INCREMENT', () => {
// mock state
const state = { counter: 10 }
// apply mutation
increment(state)
// assert result
expect(state.counter).to.equal(11)
})
})
```
136. How do you test your getters?
It is easier to test getters similar to mutations. It is recommended to test these getters if they have complicated computation.
Let's take a simple todo filter as a getter
```javascript
// getters.js
export const getters = {
filterTodos (state, status) {
return state.todos.filter(todo => {
return todo.status === status
})
}
}
```
And the test case for above getter as follows,
```javascript
// getters.spec.js
import { expect } from 'chai'
import { getters } from './getters'
describe('getters', () => {
it('filteredTodos', () => {
// mock state
const state = {
todos: [
{ id: 1, title: 'design', status: 'Completed' },
{ id: 2, title: 'testing', status: 'InProgress' },
{ id: 3, title: 'development', status: 'Completed' }
]
}
// mock getter
const filterStatus = 'Completed'
// get the result from the getter
const result = getters.filterTodos(state, filterStatus)
// assert the result
expect(result).to.deep.equal([
{ id: 1, title: 'design', status: 'Completed' },
{ id: 2, title: 'development', status: 'Completed' }
])
})
})
```
137. What is the procedure to run tests in node?
By proper mocking, you can bundle tests with webpack and run them on node without having depenceny on Browser API. It involves 2 steps,
1. **Create webpack config:** Create webpack config with proper .babelrc
```javscript
// webpack.config.js
module.exports = {
entry: './test.js',
output: {
path: __dirname,
filename: 'test-bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
```
2. ** Run testcases:** First you need to bundle and then run them using mocha as below,
```javascript
webpack
mocha test-bundle.js
```
138. What is the procedure to run tests in browser?
Below are the steps to run tests in real browser,
1. Install `mocha-loader`.
2. Configure webpack config entry point to 'mocha-loader!babel-loader!./test.js'.
3. Start webpack-dev-server using the config.
4. Go to localhost:8080/webpack-dev-server/test-bundle to see the test result
139. What is the purpose of strict mode in vuex?
In strict mode, whenever Vuex state is mutated outside of mutation handlers, an error will be thrown. It make sure that all state mutations can be explicitly tracked by debugging tools. You can just enable this by passing `strict: true` while creating the vuex store.
```javascript
const store = new Vuex.Store({
// ...
strict: true
})
```
140. Can I use strict mode in production environment?
No, it is not recommended to use strict mode in production environment. Strict mode runs a synchronous deep watcher on the state tree for detecting inappropriate mutations and it can be quite expensive when you perform large amount of mutations. i.e, It can impact performance if you enable in production mode.
Hence it should be handled through build tools,
```javascript
const store = new Vuex.Store({
// ...
strict: process.env.NODE_ENV !== 'production'
})
```
141. What is vuex plugin?
The vuex plugin is an option hat exposes hooks for each mutation. It is a normal function that receives the store as the only argument. You can create your own plugin or use built-in plugins.
The plugin skeleton would be as below,
```javascript
const myPlugin = store => {
// called when the store is initialized
store.subscribe((mutation, state) => {
// called after every mutation.
// The mutation comes in the format of `{ type, payload }`.
})
}
```
After that plugin can be configured for plugins options as below,
```javascript
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
```
142. How do you mutate state in plugins?
Similar to components you can't mutate state directly but they can trigger changes by by committing mutations. This way a plugin can be used to sync a data source to the store.
For example, createWebSocketPlugin plugin is used to sync a websocket data source to the store.
```javascript
export default function createWebSocketPlugin (socket) {
return store => {
socket.on('data', data => {
store.commit('receiveData', data)
})
store.subscribe(mutation => {
if (mutation.type === 'UPDATE_DATA') {
socket.emit('update', mutation.payload)
}
})
}
}
```
And then configure plugin in vuex store as below
```javascript
const plugin = createWebSocketPlugin(socket)
const store = new Vuex.Store({
state,
mutations,
plugins: [plugin]
})
```
143. What is vuex store?
A Vuex "store" is basically a container that holds your application state. The store creation is pretty straightforward.
Below are the list of instructions to use vuex in an increment application,
1. Configure vuex in vuejs ecosystem
```javascript
import Vuex from "vuex";
Vue.use(Vuex)
```
2. Provide an initial state object and some mutations
```javascript
// Make sure to call Vue.use(Vuex) first if using a module system
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
```
3. Trigger state change with commit and access state variables,
```javascript
store.commit('increment')
console.log(store.state.count) // -> 1
```
144. What are the differences of vuex store and plain global object?
Below are the two major differences between vuex store and plain global object
1. **Vuex stores are reactive:** If the store's state changes then vue components will reactively and efficiently get updated
2. **Cannot directly mutate the store's state:** The store's state is changed by explicitly committing mutations to ensure that every state change leaves a track-able record for tooling purpose
145. What is the reason not to update the state directly?
We want to explicitly track application state in order to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging. So we need to commit a mutation instead of changing store's state directly.
146. What is Single state tree?
Vuex's single state tree is single object contains all your application level state and serves as the "single source of truth". It does not conflict with modularity when you split state and mutations into sub modules.
147. How do you install vuex?
You can install vuex using npm or yarn as below,
```javascript
npm install vuex --save
(or)
yarn add vuex
```
In a module system, you must explicitly install Vuex via Vue.use()
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
```
(OR)
You can also install it using CDN links such as unpkg.cpm which provides NPM-based CDN links. Just include vuex after Vue and it will install itself automatically.
```javascript
<script src="https://unpkg.com/vue.js"></script>
<script src="https://unpkg.com/vuex.js"></script>
```
**Note:** You can use a specific version/tag via URLs like https://unpkg.com/vuex@2.0.0. If you don't mention any version then it will point to latest version.
148. Do I need promise for vuex?
Yes, Vuex requires Promise. If your supporting browsers do not implement Promise (e.g. IE), you can use a polyfill library, such as es6-promise using npm or yarn.
```javascript
npm install es6-promise --save # NPM
yarn add es6-promise # Yarn
```
After that import into anywhere in your application,
```javascript
import 'es6-promise/auto'
```
149. How do you display store state in vue components?
Since Vuex stores are reactive, you can retrieve" state from store by simply returning store's state from within a computed property. i.e, Whenever store state changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates.
Let's take a hello word component which display store's state in the template,
```javascript
// let's create a hello world component
const Greeting = {
template: `<div>{{ greet }}</div>`,
computed: {
greet () {
return store.state.msg
}
}
}
```
150. How do you inject store into child components?
Vuex provides a mechanism to "inject" the store into all child components from the root component with the store option. It will be enabled by vue.use(vuex).
For example, let's inject into our app component as below,
```javascript
const app = new Vue({
el: '#app',
// provide the store using the "store" option.
// this will inject the store instance to all child components.
store,
components: { Greeting },
template: `
<div class="app">
<greeting></greeting>
</div>
`
})
```
Now the store will be injected into all child components of the root and will be available on them as **this.$store**
```javascript
// let's create a hello world component
const Greeting = {
template: `<div>{{ greet }}</div>`,
computed: {
greet () {
return this.$store.state.msg
}
}
}
```
Comments
Post a Comment
please do not enter any spam link in the comment box