Category: Vue

Sometimes, we want to update Vue.js component on route change.

In this article, we’ll look at how to update Vue.js component on route change.

How to update Vue.js component on route change?

To update Vue.js component on route change, we can add the beforeRouteUpdate hook into our Vue component.

For instance, we write

<script>
export default {
  //...
  methods: {
    beforeRouteUpdate(to, from, next) {
      const id = to.params.id;
      this.$http.get(id);
      next();
    },
  },
  //...
};
</script>

to add the beforeRouteUpdate to call this.$http.get when the component has changed.

The component is reused in the new route so all existing states are kept.

Conclusion

To update Vue.js component on route change, we can add the beforeRouteUpdate hook into our Vue component.

Sometimes, we want to access a Vuex store outside of a component in Vue.js.

In this article, we’ll look at how to access a Vuex store outside of a component in Vue.js.

How to access a Vuex store outside of a component in Vue.js?

To access a Vuex store outside of a component in Vue.js, we can import the store and use it directly.

For instance, we write

import { store } from "./store";

store.getters.appSettings

to import the store with

import { store } from "./store";

Then we get the value of the appSettings getter with

store.getters.appSettings

Conclusion

To access a Vuex store outside of a component in Vue.js, we can import the store and use it directly.

Sometimes, we want to dynamically add different components in Vue.js.

In this article, we’ll look at how to dynamically add different components in Vue.js.

How to dynamically add different components in Vue.js?

To dynamically add different components in Vue.js, we can use the component component.

For instance, we write

<template>
  <div>
    <component
      v-for="field in fields"
      :is="field.type"
      :key="field.id"
    ></component>
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      fields: [
        { id: 1, type: "Foo" },
        { id: 2, type: "Bar" },
        { id: 3, type: "Baz" },
      ],
    };
  },
  //...
};
</script>

to add the fields array that has the id and type properties in each fields entry.

The type property of each object is set to the name of the component we want to render.

We use v-for to loop through each fields entry and nd we render all the components with the component component with the is prop set to the component name string.

Conclusion

To dynamically add different components in Vue.js, we can use the component component.

Sometimes, we want to fix the ‘Error: Vuetify is not properly initialized.’ error with Vue.js.

In this article, we’ll look at how to fix the ‘Error: Vuetify is not properly initialized.’ error with Vue.js.

How to fix the ‘Error: Vuetify is not properly initialized.’ error with Vue.js?

To fix the ‘Error: Vuetify is not properly initialized.’ error with Vue.js, we should call Vue.use with Vuetify and add the vuetify property to the object that we create the Vue instance with.

For instance, we write

import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);

new Vue({
  vuetify: new Vuetify(),
  //...
});

to add the Vuetify plugin with

Vue.use(Vuetify);

Then we set the vuetify property to a new Vuetify instance with

vuetify: new Vuetify()

Conclusion

To fix the ‘Error: Vuetify is not properly initialized.’ error with Vue.js, we should call Vue.use with Vuetify and add the vuetify property to the object that we create the Vue instance with.

Sometimes, we want to watch for prop changes with the Vue.js Composition API.

In this article, we’ll look at how to watch for prop changes with the Vue.js Composition API.

How to watch for prop changes with the Vue.js Composition API?

To watch for prop changes with the Vue.js Composition API, we can call the watch function.

For instance, we write

watch(
  () => props.selected,
  (selection, prevSelection) => {
    /* ... */
  }
);

to call watch to watch the value of the selected prop.

And then we can get the current value of selected from selection and the previous value of it from prevSelection.

Conclusion

To watch for prop changes with the Vue.js Composition API, we can call the watch function.