Category: Vue

Sometimes, we want to import and use image in a Vue.js single file component.

In this article, we’ll look at how to import and use image in a Vue.js single file component.

How to import and use image in a Vue.js single file component?

To import and use image in a Vue.js single file component, we can set the src prop of the image to the image path returned by the require function.

For instance, we write

<template>
  <div id="app">
    <img :src="require('./assets/logo.png')" />
  </div>
</template>

<script>
export default {};
</script>

<style lang="css"></style>

to set the src prop of the image to the path returned by require.

We call require with the relative path of the image to return the resolved path of the image.

Conclusion

To import and use image in a Vue.js single file component, we can set the src prop of the image to the image path returned by the require function.

Sometimes, we want to reference static assets with Vue.js.

In this article, we’ll look at how to reference static assets with Vue.js.

How to reference static assets with Vue.js?

To reference static assets with Vue.js, we can set the src attribute of the img element to a path that starts with @/.

For instance, we write

<img src="@/assets/images/home.png"/>

to set the src attribute of the img element to an image with the path starting with @/.

@/ is a shorthand for the src directory in the Vue project.

Conclusion

To reference static assets with Vue.js, we can set the src attribute of the img element to a path that starts with @/.

Sometimes, we want to force Vue.js to reload or re-render.

In this article, we’ll look at how to force Vue.js to reload or re-render.

How to force Vue.js to reload or re-render?

To force Vue.js to reload or re-render, we can use the this.$forceUpdate method.

For instance, we write

this.$forceUpdate();

to call this.$forceUpdate() in our component to force an update.

Conclusion

To force Vue.js to reload or re-render, we can use the this.$forceUpdate method.

Sometimes, we want to persist Vuex state on page refresh.

In this article, we’ll look at how to persist Vuex state on page refresh.

How to persist Vuex state on page refresh?

To persist Vuex state on page refresh, we can use the vuex-persistedstate package.

To install it, we run

npm i vuex-persistedstate

Then we use it by writing

import { Store } from "vuex";
import createPersistedState from "vuex-persistedstate";
import * as Cookies from "js-cookie";

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) =>
        Cookies.set(key, state, { expires: 3, secure: true }),
    }),
  ],
});

to call createPersistedState to return the plugin that we add to the plugins array.

We call it with an object with methods to get and set data with getState and setState respectively.

We get and set cookies when state is changed with Cookies.getJSON and Cookies.set.

Conclusion

To persist Vuex state on page refresh, we can use the vuex-persistedstate package.

Sometimes, we want to emit event from grandchild to his grandparent component with Vue.js

In this article, we’ll look at how to emit event from grandchild to his grandparent component with Vue.js.

How to emit event from grandchild to his grandparent component with Vue.js?

To emit event from grandchild to his grandparent component with Vue.js, we call $emit in the grand child component.

Then in the parent component, we pass the events from the child to the grandparent with v-on="$listeners.

And then we listen to the event emitted from the grandchild component in the grandparent.

For instance, we write

Vue.component("grand-child", {
  //...
  methods: {
    emitToggleEvent() {
      this.$emit("toggle-value");
    },
  },
});

to call this.$emit in the grand-child component to emit the toggle-value event.

Then in the parent component of the grand-child, we write

Vue.component("child", {
  template: `<div class="child">
      <grand-child v-on="$listeners"></grand-child>
    </div>`,
});

to pass all events to the child‘s parent with v-on="$listeners".

Finally, in the parent component, which is the parent of the child component, we listen to the toggle-value event with

Vue.component("parent", {
  template: `div>
      <child @toggle-value="toggleValue"></child>
    </div>`,
  //...
});

Conclusion

To emit event from grandchild to his grandparent component with Vue.js, we call $emit in the grand child component.

Then in the parent component, we pass the events from the child to the grandparent with v-on="$listeners.

And then we listen to the event emitted from the grandchild component in the grandparent.