Category: JavaScript

Sometimes, we want to show element when input has focus with Vue.js.

In this article, we’ll look at how to show element when input has focus with Vue.js.

How to show element when input has focus with Vue.js?

To show element when input has focus with Vue.js, we can add a flag that’s updated when we focus on and away from the input.

For instance, we write

<template>
  <div id="app">
    <input
      type="search"
      v-model="query"
      @focus="showDiv = true"
      @blur="showDiv = false"
    />
    <div v-if="showDiv">...</div>
  </div>
</template>

to add the showDiv flag and set it to true when we focus on the input with @focus="showDiv = true".

Likewise, we set showDiv to false when we focus away from the input with @blur="showDiv = false".

Then we showDiv to control when the div below the input is shown with v-if="showDiv".

Conclusion

To show element when input has focus with Vue.js, we can add a flag that’s updated when we focus on and away from the input.

Sometimes, we want to direct Vue CLI to put built project files in different directories.

In this article, we’ll look at how to direct Vue CLI to put built project files in different directories.

How to direct Vue CLI to put built project files in different directories?

To direct Vue CLI to put built project files in different directories, we can set the outputDir and assetsDir options in vue.config.js.

For instance, we write

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../backend/templates/dist"),
  assetsDir: "../../static/assets",
};

to set the outputDir to a path that’s different from the default to put the built files in that path.

And we set the assetDir option to a path that we want to put the asset files that goes with the app into a folder that’s different from the default.

Conclusion

To direct Vue CLI to put built project files in different directories, we can set the outputDir and assetsDir options in vue.config.js.

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.

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.

Conclusion

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.

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.

Conclusion

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.

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"].

Conclusion

To access the getter from another Vuex module, we can get them from the rootGetters parameter.