Category: Vue Answers

Sometimes, we want to change {{ }} tags with Vue.js.

In this article, we’ll look at how to change {{ }} tags with Vue.js.

How to change {{ }} tags with Vue.js?

To change {{ }} tags with Vue.js, we can set the delimiters property when we create the Vue instance.

For instance, we write

const app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!",
  },
  delimiters: ["[[", "]]"],
});

to set the delimiters property to ["[[", "]]"] in the object we create the Vue instance with.

Now we can use

[[ message ]] 

to render the message reactive property in a Vue component instead of the default curly braces.

Conclusion

To change {{ }} tags with Vue.js, we can set the delimiters property when we create the Vue instance.

Sometimes, we want to redirect on page not found with Vue Router.

In this article, we’ll look at how to redirect on page not found with Vue Router.

How to redirect on page not found with Vue Router?

To redirect on page not found with Vue Router, we can use the '*' path to match all routes that aren’t listed in the routes definition.

For instance, we write

const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/", component: HomeComponent },
    // ...
    { path: "*", component: PageNotFound },
  ],
});

to create a VueRouter instance with

{ path: "*", component: PageNotFound }

in routes to match all route paths` that aren’t listed above it.

PageNotFound is a component like any other component.

Conclusion

To redirect on page not found with Vue Router, we can use the '*' path to match all routes that aren’t listed in the routes definition.

Sometimes, we want to listen for route change events with Vue.js and Vue Router.

In this article, we’ll look at how to listen for route change events with Vue.js and Vue Router.

How to listen for route change events with Vue.js and Vue Router?

To listen for route change events with Vue.js and Vue Router, we can watch the $route object in our component.

For instance, we write

<template>
  <div>...</div>
</template>

<script>
//...
export default {
  //...
  watch: {
    $route: {
      deep: true,
      handler(to, from) {
        this.show = false;
      },
    },
  },
  //...
};
</script>

to watch the $route in our component.

We set deep to true to watch for all changes in the $route object’s contents.

to has the latest route data.

from has the data of the previous route.

Conclusion

To listen for route change events with Vue.js and Vue Router, we can watch the $route object in our component.

Sometimes, we want to render Vue.js template code in a Jinja template.

In this article, we’ll look at how to render Vue.js template code in a Jinja template.

How to render Vue.js template code in a Jinja template?

To render by Vue.js template code in a Jinja template, we can set the delimiters property when we create the Vue instance to avoid conflicting with Jinja.

For instance, we write

const app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!",
  },
  delimiters: ["[[", "]]"],
});

to set the delimiters property to ["[[", "]]"] in the object we create the Vue instance with.

Now we can use

[[ message ]] 

to render the message reactive property in a Vue component instead of the default curly braces.

Conclusion

To render by Vue.js template code in a Jinja template, we can set the delimiters property when we create the Vue instance to avoid conflicting with Jinja.

Sometimes, we want to load all server side data on initial Vue.js or Vue Router load.

In this article, we’ll look at how to load all server side data on initial Vue.js or Vue Router load.

How to load all server side data on initial Vue.js or Vue Router load?

To load all server side data on initial Vue.js or Vue Router load, we can run the initialization code in the beforeCreate hook.

For instance, we write

<script>
//...
export default {
  //...
  beforeCreate() {
    store.dispatch("initialize", comms);
  },
  //...
};
</script>

to call store.dispatch with the 'initialize' action and load all the initialzation code in the iniitlaize action.

store is a Vuex store.

Conclusion

To load all server side data on initial Vue.js or Vue Router load, we can run the initialization code in the beforeCreate hook.