Category: Vue

Sometimes, we want to create global data with Vue.js 2.

In this article, we’ll look at how to create global data with Vue.js 2.

How to create global data with Vue.js 2?

To create global data with Vue.js 2, we can create a Vuex store.

For instance, we write

const store = new Vuex.Store({
  state: {
    userData: [],
  },
  mutations: {
    setUserData(state, data) {
      state.userData = data;
    },
  },
});

to create a Vuex store with the Vuex.Store constructor.

Then we can commit the setUserData mutation with

store.commit('setUserData', userData)

And we can get the userData state with

store.state.userData

Conclusion

To create global data with Vue.js 2, we can create a Vuex store.

Sometimes, we want to fix the ‘Component template should contain exactly one root element’ error with Vue.js.

In this article, we’ll look at how to fix the ‘Component template should contain exactly one root element’ error with Vue.js.

How to fix the ‘Component template should contain exactly one root element’ error with Vue.js?

To fix the ‘Component template should contain exactly one root element’ error with Vue.js, we should make sure we only have one root element in our component template.

For instance, we write

<template>
  <div>
    <div class="form-group">...</div>

    <div class="col-md-6">...</div>
  </div>
</template>

to wrap the 2 divs with another div to avoid this error.

Vue 3 allows multiple root elements, so we won’t see this error with multiple elements as the child of template.

Conclusion

To fix the ‘Component template should contain exactly one root element’ error with Vue.js, we should make sure we only have one root element in our component template.

Sometimes, we want to access Vuex state when defining Vue Router routes.

In this article, we’ll look at how to access Vuex state when defining Vue Router routes.

How to access Vuex state when defining Vue Router routes?

To access Vuex state when defining Vue Router routes, we can import the store in the file with the Vue Router hooks.

For instance, we write

import Vuex from "vuex";

const store = new Vuex.Store({
  state: {
    globalError: "",
  },
  mutations: {
    setGlobalError(state, error) {
      state.globalError = error;
    },
  },
});

export default store;

to create a store and export it using the Vuex.Store constructor in store.js.

Then in router.js, we write

import Vue from "vue";
import VueRouter from "vue-router";
import store from "./store.js";

Vue.use(VueRouter);

const routes = [
  { path: "/home", name: "Home", component: Home },
  { path: "/login", name: "Login", component: Login },
  {
    path: "/secret",
    name: "Secret",
    component: SecretPage,
    meta: { requiresLogin: true },
  },
];

const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  if (store.state.globalError) {
    //...
    next("/Login");
  } else {
    next();
  }
});

to add the routes array with the routes.

And then we create a VueRouter instance with the routes.

Next, we get the globalError store state from store.state.globalError in the beforeEach callback.

Conclusion

To access Vuex state when defining Vue Router routes, we can import the store in the file with the Vue Router hooks.

Sometimes, we want to pass props dynamically to dynamic component in Vue.js.

In this article, we’ll look at how to pass props dynamically to dynamic component in Vue.js.

How to pass props dynamically to dynamic component in Vue.js?

To pass props dynamically to dynamic component in Vue.js, we can check the current component being rendered in component and pass in the props accordingly.

For instance, we write

<template>
  <component :is="currentComponent" v-bind="currentProps"></component>
</template>

<script>
export default {
  //...
  data() {
    return {
      currentComponent: "myComponent",
    };
  },
  computed: {
    currentProps() {
      if (this.currentComponent === "myComponent") {
        return { foo: "baz" };
      }
    },
  },
  //...
};
</script>

to check the value of currentComponent in the currentProps` computed property.

And we return an object with the props we want to pass into the child component.

In the template, we add the component component to render the component that’s set with the name as the value of the is prop.

And we set the v-bind directive to currentProps to pass the properties inside the object as props.

Conclusion

To pass props dynamically to dynamic component in Vue.js, we can check the current component being rendered in component and pass in the props accordingly.

Sometimes, we want to display unescaped HTML in Vue.js.

In this article, we’ll look at how to display unescaped HTML in Vue.js.

How to display unescaped HTML in Vue.js?

To display unescaped HTML in Vue.js, we can set the v-html directive to the reactive property string with the HTML we want to display.

For instance, we write

<template>
  <section v-html="desc"></section>
</template>

to add the v-html directive to the section element and set its value to desc to render as the content of desc as raw HTML.

Conclusion

To display unescaped HTML in Vue.js, we can set the v-html directive to the reactive property string with the HTML we want to display.