Category: Vue Answers

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.

Sometimes, we want to fix Vue Router return 404 when revisit to the URL.

In this article, we’ll look at how to fix Vue Router return 404 when revisit to the URL.

How to fix Vue Router return 404 when revisit to the URL?

To fix Vue Router return 404 when revisit to the URL, we should make sure we redirect all URLs to index.html.

For instance, if we host our Vue app in Apache, we can add the following into the .htaccess file.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</ifModule>

We match all URLs with

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

And then we redirect all the URLs to index.html with

RewriteRule . /index.html [L]

Conclusion

To fix Vue Router return 404 when revisit to the URL, we should make sure we redirect all URLs to index.html.

For instance, if we host our Vue app in Apache, we can add the following into the .htaccess file.