Category: Vue

Sometimes, we want to watch for local storage changes in Vue.js.

In this article, we’ll look at how to watch for local storage changes in Vue.js.

How to watch for local storage changes in Vue.js?

To watch for local storage changes in Vue.js, we can listen to the document‘s storage event.

For instance, we write

<script>
export default {
  methods: {
    storageListener() {
      //...
    },
  },
  mounted() {
    document.addEventListener("storage", this.storageListener);
  },
  beforeDestroy() {
    document.removeEventListener("storage", this.storageListener);
  },
};
</script>

to call document.addEventListener with 'storage' and the this.storageListener method to call this.storageListener when the local storage content changes in the mounted hook when the component is mounted.

Then in the beforeDestroy hook, we call removeEventListener to remove the this.storageListener as the storage event listener when the component unmounts.

Conclusion

To watch for local storage changes in Vue.js, we can listen to the document‘s storage event.

Sometimes, we want to pass a component as props and use it in a child component in Vue.js.

In this article, we’ll look at how to pass a component as props and use it in a child component in Vue.js.

How to pass a component as props and use it in a child component in Vue.js?

To pass a component as props and use it in a child component in Vue.js, we can use the component component.

For instance, we write

<template>
  <div>
    <component :is="childComponent">something</component>
  </div>
</template>

to add the component component.

We set the is prop to the childComponent string which has the name of the component we want to render.

Conclusion

To pass a component as props and use it in a child component in Vue.js, we can use the component component.

Sometimes, we want to add dynamic styles with variables with Vue.js.

In this article, we’ll look at how to add dynamic styles with variables with Vue.js.

How to add dynamic styles with variables with Vue.js?

To add dynamic styles with variables with Vue.js, we can use the style prop.

For instance, we write

<template>
  <img src="/img.jpg" alt="" :style="{ 'background-color': backgroundColor }" />
</template>

to set the background-color of the image to backgroundColor where backgroundColor is a reactive property.

Conclusion

To add dynamic styles with variables with Vue.js, we can use the style prop.

Sometimes, we want to apply global variables to Vue.js.

In this article, we’ll look at how to apply global variables to Vue.js.

How to apply global variables to Vue.js?

To apply global variables to Vue.js, we can add our global variables into the Vue prototype.

For instance, we write

Vue.prototype.$appName = 'App'

to add the $appName global variable that we can access in all components in the app with

this.$appName

Conclusion

To apply global variables to Vue.js, we can add our global variables into the Vue prototype.

Sometimes, we want to pass props with programmatic navigation Vue.js.

In this article, we’ll look at how to pass props with programmatic navigation Vue.js.

How to pass props with programmatic navigation Vue.js?

To pass props with programmatic navigation Vue.js, we call $router.push with an object with the params property with the props we want to pass into a component.

Then when we define the route, we set the props property to true to let us take the route parameters in as props into the route component.

For instance, we write

this.$router.push({ name: "foo", params: { title: "test title" } });

to call $router.push to navigate to the route with the given name.

The params object will be passed in as props.

Then we write

{
  path: "/foo",
  name: "foo",
  component: FooComponent,
  props: true
}

in the routes array that we use to create the VueRouter instance to add the route with name 'foo' and we set props to true to make the params available as props on FooComponent.

Conclusion

To pass props with programmatic navigation Vue.js, we call $router.push with an object with the params property with the props we want to pass into a component.

Then when we define the route, we set the props property to true to let us take the route parameters in as props into the route component.