Skip to content

Commit 68a41b4

Browse files
sudheerjsudheerj
committed
Add vueloader questions and answers
1 parent 03efe88 commit 68a41b4

File tree

1 file changed

+244
-1
lines changed

1 file changed

+244
-1
lines changed

‎README.md‎

Lines changed: 244 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,19 @@ List of 300 VueJS Interview Questions
110110
|101| [What is vuex?](#what-is-vuex)|
111111
|102| [What are the major components of State Management Pattern?](#what-are-the-major-components-of-state-management-pattern)|
112112
|103| [How do you represent one way data flow in vuex?](#how-do-you-represent-one-way-data-flow-in-vuex)|
113+
|104| [What is a vuejs loader?](#what-is-a-vuejs-loader)|
114+
|105| [How do you configure vue loader in webpack?](#how-do-you-configure-vue-loader-in-webpack)|
115+
|106| [What are asset url transform rules?](#what-are-asset-url-transform-rules)|
116+
|107| [How do you work with preprocessors using vue loader?](#how-do-you-work-with-preprocessors-using-vue-loader)|
117+
|108| [What is scoped CSS?](#What-is-scoped-CSS)|
118+
|109| [Is it possible to mix both local and global styles?](#is-it-possible-to-mix-both-local-and-global-styles)|
119+
|110| [How do you use deep selectors?](#how-do-you-use-deepselectors)|
120+
|111| [Is parent styles leaked into child components in scoped css?](#is-parent-styles-leaked-into-child-components-in-scoped-css)|
121+
|112| [How do you style dynamic generated content using scoped css?](#how-do-you-style-dynamic-generated-content-using-scoped-css)|
122+
|113| [Is CSS modules supported in Vuejs?](#is-css-modules-supported-in-vuejs)|
123+
|114| [Can I use runtime builds for all templates?](#can-i-use-runtime-builds-for-all-templates)|
124+
|115| [How to use CSS modules in vuejs?](#how-to-use-css-modules-in-vuejs)|
125+
|116| [Can I use CSS modules for preprocessors?](#can-i-use-css-modules-for-preprocessors)|
113126

114127
1. ### What is VueJS?
115128
**Vue.js** is an open-source, progressive Javascript framework for building user interfaces that aim to be incrementally adoptable. The core library of VueJS is focused on the `view layer` only, and is easy to pick up and integrate with other libraries or existing projects.
@@ -1824,7 +1837,7 @@ List of 300 VueJS Interview Questions
18241837
18251838
**1. Full:** These are the builds that contain both the compiler and the runtime.
18261839
1827-
**2. Runtime Only:** These builds doesn't include compiler but the code is responsible for creating Vue instances, rendering and patching virtual DOM.
1840+
**2. Runtime Only:** These builds doesn't include compiler but the code is responsible for creating Vue instances, rendering and patching virtual DOM. These are about 6KB lighter min+gzip.
18281841
18291842
89. ### List down different builds of vuejs?
18301843
Below are the list of different builds of VueJS based on type of build,
@@ -2000,4 +2013,234 @@ List of 300 VueJS Interview Questions
20002013
103. ### How do you represent one way data flow in vuex?
20012014
Vue.js has a one-way data flow model, through the props property. The same concept can be represented in vuex has below,
20022015
<img src="https://github.com/sudheerj/vuejs-interview-questions/blob/master/images/flow.png" width="400" height="500">
2016+
104. ### What is a vuejs loader?
2017+
Vue loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs). For example, it authors HelloWorld component in a SFC,
2018+
```javascript
2019+
<template>
2020+
<div class="greeting">{{ message }}</div>
2021+
</template>
2022+
2023+
<script>
2024+
export default {
2025+
data () {
2026+
return {
2027+
message: 'Hello world for vueloader!'
2028+
}
2029+
}
2030+
}
2031+
</script>
20032032
2033+
<style>
2034+
.greeting {
2035+
color: blue;
2036+
}
2037+
</style>
2038+
```
2039+
105. ### How do you configure vue loader in webpack?
2040+
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.
2041+
For example, the simple demonistration of webpack configuration for vue loader would be as below,
2042+
```javascript
2043+
// webpack.config.js
2044+
const VueLoaderPlugin = require('vue-loader/lib/plugin')
2045+
2046+
module.exports = {
2047+
mode: 'development',
2048+
module: {
2049+
rules: [
2050+
{
2051+
test: /\.vue$/,
2052+
loader: 'vue-loader'
2053+
},
2054+
// this will apply to both plain `.js` files and `<script>` blocks in `.vue` files
2055+
{
2056+
test: /\.js$/,
2057+
loader: 'babel-loader'
2058+
},
2059+
// this will apply to both plain `.css` files and `<style>` blocks in `.vue` files
2060+
{
2061+
test: /\.css$/,
2062+
use: [
2063+
'vue-style-loader',
2064+
'css-loader'
2065+
]
2066+
}
2067+
]
2068+
},
2069+
plugins: [
2070+
// make sure to include the plugin for cloning and mapping them to respective language blocks
2071+
new VueLoaderPlugin()
2072+
]
2073+
}
2074+
```
2075+
106. ### What are asset url transform rules?
2076+
Below are the list of Asset URL transform rules
2077+
1. ** Absolute path**: If the URL is an absolute path (for example, /images/loader.png)then it will be preserved as-is.
2078+
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.
2079+
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.
2080+
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.
2081+
107. ### How do you work with preprocessors using vue loader?
2082+
`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.
2083+
108. ### What is scoped CSS?
2084+
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.
2085+
Let's take an example usage of scoped css,
2086+
```javascript
2087+
<style scoped>
2088+
.greeting {
2089+
color: green;
2090+
}
2091+
</style>
2092+
2093+
<template>
2094+
<div class="greeting">Let's start Scoped CSS</div>
2095+
</template>
2096+
```
2097+
The above code will be converted to plain CSS,
2098+
```javascript
2099+
<style scoped>
2100+
.greeting[data-v-f3f3eg9] {
2101+
color: green;
2102+
}
2103+
</style>
2104+
2105+
<template>
2106+
<div class="greeting" data-v-f3f3eg9>Let's start Scoped CSS</div>
2107+
</template>
2108+
```
2109+
109. ### Is it possible to mix both local and global styles?
2110+
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.
2111+
```javascript
2112+
<style>
2113+
/* global styles */
2114+
</style>
2115+
2116+
<style scoped>
2117+
/* local styles */
2118+
</style>
2119+
```
2120+
110. ### How do you use deep selectors?
2121+
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,
2122+
```javascript
2123+
<style scoped>
2124+
.class1 >>> .class2 { /* ... */ }
2125+
</style>
2126+
```
2127+
It will be converted as,
2128+
```javascript
2129+
.class1[data-v-f3f3eg9] .class2 { /* ... */ }
2130+
```
2131+
**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.
2132+
111. ### Is parent styles leaked into child components in scoped css?
2133+
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.
2134+
For example, the background color property of parent component leaked into child component as below,
2135+
//parent.vue
2136+
```javascript
2137+
<template>
2138+
<div class="wrapper">
2139+
<p>parent</p>
2140+
<ChildMessageComponent/>
2141+
</div>
2142+
</template>
2143+
2144+
<script>
2145+
import ChildMessageComponent from "./components/child";
2146+
2147+
export default {
2148+
name: "App",
2149+
components: {
2150+
ChildMessageComponent
2151+
}
2152+
};
2153+
</script>
2154+
<style scoped>
2155+
.wrapper {
2156+
background: blue;
2157+
}
2158+
</style>
2159+
```
2160+
//child.vue
2161+
```javascript
2162+
<template>
2163+
<div class="wrapper">
2164+
<p>child</p>
2165+
</div>
2166+
</template>
2167+
2168+
<script>
2169+
export default {
2170+
name: "Hello, Scoped CSS",
2171+
};
2172+
</script>
2173+
<style scoped>
2174+
.wrapper {
2175+
background: red;
2176+
}
2177+
</style>
2178+
```
2179+
Now the background color of child wrapper is going to be blue instead red.
2180+
112. ### How do you style dynamic generated content using scoped css?
2181+
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.
2182+
113. ### Is CSS modules supported in Vuejs?
2183+
Yes, vue-loader provides first-class integration with CSS Modules as an alternative for simulated scoped CSS.
2184+
114. ### Can I use runtime builds for all templates?
2185+
No, templates (or any Vue-specific HTML) are ONLY allowed in .vue files and render functions are required in other cases.
2186+
115. ### How to use CSS modules in vuejs?
2187+
Below are the steps to use css modules in VueJS,
2188+
1. ** Enable CSS modules:** CSS Modules must be enabled by passing modules: true option to css-loader
2189+
```javascript
2190+
// webpack.config.js
2191+
{
2192+
module: {
2193+
rules: [
2194+
// ... other rules omitted
2195+
{
2196+
test: /\.css$/,
2197+
use: [
2198+
'vue-style-loader',
2199+
{
2200+
loader: 'css-loader',
2201+
options: {
2202+
// enable CSS Modules
2203+
modules: true,
2204+
// customize generated class names
2205+
localIdentName: '[local]_[hash:base64:8]'
2206+
}
2207+
}
2208+
]
2209+
}
2210+
]
2211+
}
2212+
}
2213+
```
2214+
2. ** Add module attribute:** Add the module attribute to your `<style>`
2215+
```javascript
2216+
<style module>
2217+
.customStyle {
2218+
background: blue;
2219+
}
2220+
</style>
2221+
```
2222+
3. ** Inject CSS modules:** You can inject CSS modules object with computed property $style
2223+
```javascript
2224+
<template>
2225+
<div :class="$style.blue">
2226+
Background color should be in blue
2227+
</p>
2228+
</template>
2229+
```
2230+
It can work with object/array syntax of :class binding.
2231+
116. ### Can I use CSS modules for preprocessors?
2232+
Yes,You can use preprocessors with CSS Modules. For example, sass-loader can configured in webpack file for sass preprocessor.
2233+
```javascript
2234+
// webpack.config.js -> module.rules
2235+
{
2236+
test: /\.scss$/,
2237+
use: [
2238+
'vue-style-loader',
2239+
{
2240+
loader: 'css-loader',
2241+
options: { modules: true }
2242+
},
2243+
'sass-loader'
2244+
]
2245+
}
2246+
```

0 commit comments

Comments
 (0)