Category: Vue Answers

Sometimes, we want to disable ESLint in Vue CLI.

In this article, we’ll look at how to disable ESLint in Vue CLI.

How to disable ESLint in Vue CLI?

To disable ESLint in Vue CLI, we just remove the @vue/cli-plugin-eslint package from the Vue CLI project.

We run

npm remove @vue/cli-plugin-eslint

to remove the @vue/cli-plugin-eslint package, which will disable ESLint in the Vue CLI project.

Conclusion

To disable ESLint in Vue CLI, we just remove the @vue/cli-plugin-eslint package from the Vue CLI project.

Sometimes, we want to pass down slots inside wrapper component with Vue.js.

In this article, we’ll look at how to pass down slots inside wrapper component with Vue.js.

How to pass down slots inside wrapper component with Vue.js?

To pass down slots inside wrapper component with Vue.js, we can use the $scopedSlots property.

For instance, we write

<template>
  <wrapper>
    <b-table v-bind="$attrs" v-on="$listeners">
      <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"
        ><slot :name="slot" v-bind="scope"
      /></template>
    </b-table>
  </wrapper>
</template>

to loop through the $scopedSlots property with v-for.

And then we get the slot name from the slot property.

We then set the slot to name and the scope of the slot to v-bind to pass down the name and variables.

Conclusion

To pass down slots inside wrapper component with Vue.js, we can use the $scopedSlots property.

Sometimes, we want to set a component’s non-reactive data in Vue.js 2.

In this article, we’ll look at how to set a component’s non-reactive data in Vue.js 2.

How to set a component’s non-reactive data in Vue.js 2?

To set a component’s non-reactive data in Vue.js 2, we can set them as properties of this in the created hook.

For instance, we write

<template>
  <div id="app">
    <ul>
      <li v-for="item in arr" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.arr = ["item 1", "item 2"];
  },
};
</script>

to set the non-reactive this.arr property to ["item 1", "item 2"] in the created hook.

And then we render the items in arr with v-for.

this.arr is reactive since the assignment is done in the created hook.

Conclusion

To set a component’s non-reactive data in Vue.js 2, we can set them as properties of this in the created hook.

Sometimes, we want to use scoped styles in Vue.js single file components.

In this article, we’ll look at how to use scoped styles in Vue.js single file components.

How to use scoped styles in Vue.js single file components?

To use scoped styles in Vue.js single file components, we can add the module attribute to the style tag.

For instance, we write

<template>
  <div :class="$style.baz">
    <Bar></Bar>
  </div>
</template>

<style module>
.baz {
  color: green;
}
</style>

to add the style tag with the module attribute so we can use $style to add the styles in the template.

We add the baz class in style and set its color to green.

Then we set the class prop of the div to $style.baz to apply the baz class to the div to make its content color green.

Conclusion

To use scoped styles in Vue.js single file components, we can add the module attribute to the style tag.

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.