Sometimes, we want to add global CSS in Vue.js.
In this article, we’ll look at how to add global CSS in Vue.js.
To add global CSS in Vue.js, we can import our global CSS file in main.js.
For instance, in main.js, we write
import "./assets/css/main.css";
to import the styles in ./assets/css/main.css globally.
To add global CSS in Vue.js, we can import our global CSS file in main.js.
Sometimes, we want to add bootstrap to Vue CLI project.
In this article, we’ll look at how to add bootstrap to Vue CLI project.
To add bootstrap to Vue CLI project, we can install the Bootstrap and jQuery packages and then import all the files from the packages.
To install the packages, we run
npm install bootstrap popper.js jquery
Then we import them in main.js by writing
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'
Importing them in main.js will make them available in the whole app.
To add bootstrap to Vue CLI project, we can install the Bootstrap and jQuery packages and then import all the files from the packages.
Sometimes, we want to access the getter from another Vuex module.
In this article, we’ll look at how to access the getter from another Vuex module.
To access the getter from another Vuex module, we can get them from the rootGetters parameter.
For instance, we write
const store = new Vuex.Store({
//...
getters: {
someGetter: (state, getters, rootState, rootGetters) => {
//...
rootGetters.someOtherGetter;
rootGetters["bar/someOtherGetter"];
//...
},
//...
},
//...
});
to create a Vuex.Store instance with the someGetter getter.
In it, we get the someOtherGetter getter with rootGetters.someOtherGetter.
And we get the namespaced bar/someOtherGetter getter with rootGetters["bar/someOtherGetter"].
To access the getter from another Vuex module, we can get them from the rootGetters parameter.
Sometimes, we want to proxy requests to a separate backend server with Vue CLI.
In this article, we’ll look at how to proxy requests to a separate backend server with Vue CLI.
To proxy requests to a separate backend server with Vue CLI, we can add the proxy options to vue.config.js.
For instance, we write
module.exports = {
devServer: {
proxy: {
"/gists": {
target: "https://api.github.com",
secure: false,
},
},
},
};
in vue.config.js to proxy all requests to /gists to https://api.github.com.
To proxy requests to a separate backend server with Vue CLI, we can add the proxy options to vue.config.js.
Sometimes, we want to use v-model on an array with multiple inputs with Vue.js.
In this article, we’ll look at how to use v-model on an array with multiple inputs with Vue.js.
To use v-model on an array with multiple inputs with Vue.js, we can use the v-for directive to render the array.
Then we use v-model to bind to the properties of each object.
For instance, we write
<template>
<div id="app">
<div v-for="(find, index) in finds">
<input v-model="find.value" :key="find.id" />
</div>
<button @click="addFind">New</button>
</div>
</template>
<script>
//...
export default {
//...
data() {
return {
finds: [],
};
},
methods: {
addFind() {
this.finds.push({ id: uuidv4(), value: "" });
},
},
//...
};
</script>
to use v-for to render the finds array into divs.
Then in each div, we add an input that binds the find.value property to the input value.
We set key to the unique find.id value so Vue can distinguish the rendered items.
Then in addFind, we call this.finds.push with an object with the unique id and value set to an empty string.
addFind is called when we click the New button.
To use v-model on an array with multiple inputs with Vue.js, we can use the v-for directive to render the array.
Then we use v-model to bind to the properties of each object.