Category: Vue Answers

Categories
JavaScript Answers Vue Vue Answers

How to Set Up ESLint and Prettier in Vue.js 3 Projects and Format Code Automatically with Prettier with VS Code?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.

In this article, we’ll look at how to set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code.

How to Set Up ESLint and Prettier in Vue.js Projects and Format Code Automatically with Prettier with VS Code?

To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.

First, we install a few packages into our Vue project by running:

npm i -D babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-prettier

We install the ESLint with plugins for Vue projects.

Then we install extensions by pressing ctrl+shift+p in VS Code and search for ‘Extensions: Install Extension’.

Next, in the extensions search box on the left, we search for Prettier, ESLint, and Vetur and install them by clicking install.

After that, we press ctrl+shift+p in VS Code and search for ‘Preferences: Open Settings (JSON).

And then we paste the following into settings.json:

{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "editor.renderControlCharacters": false,
  "editor.renderWhitespace": "none",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.formatOnSave": true
  },
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter",
    "editor.formatOnSave": true
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "html.format.wrapLineLength": 80,
  "files.insertFinalNewline": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[python]": {
    "editor.formatOnType": true
  },
  "extensions.ignoreRecommendations": true,
  "vue.codeActions.savingTimeLimit": 2000
}

to enable auto formatting and linting of Vue projects.

Finally, we create an .eslintrc.js file in the Vue project’s root and add:

module.exports = {
  root: true,
  env: {
    node: true,
    es2022: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

into the file to enable the extensions needed for auto linting and formatting.

Conclusion

To set up ESLint and Prettier in Vue.js projects and format code automatically with Prettier with VS Code, we install a few packages and VS Code extensions and change a few settings.

Categories
Vue Answers

How to properly watch for nested data with Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to properly watch for nested data with Vue.js.

In this article, we’ll look at how to properly watch for nested data with Vue.js.

How to properly watch for nested data with Vue.js?

To properly watch for nested data with Vue.js, we add a watcher for the property we want to watch.

For instance, we write

new Vue({
  el: "#myElement",
  data: {
    entity: {
      properties: [],
    },
  },
  watch: {
    "entity.properties": {
      handler(after, before) {
        // ...
      },
      deep: true,
    },
  },
});

to watch the entity.properties reactive property for changes.

handler is called when the value changes.

We set deep to true to watch for changes in all levels of the property is entity.properties is an object.

Conclusion

To properly watch for nested data with Vue.js, we add a watcher for the property we want to watch.

Categories
Vue Answers

How to disable input conditionally with Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to disable input conditionally with Vue.js.

In this article, we’ll look at how to disable input conditionally with Vue.js.

How to disable input conditionally with Vue.js?

To disable input conditionally with Vue.js, we set the disabled prop.

For instance, we write

<template>
  <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>

<script>
export default {
  computed: {
    clickable() {
      return true;
    },
  },
};
</script>

to define the clickable computed property in the component code.

Then we set the disabled prop to the clickable computed property to disable it if it’s true.

Conclusion

To disable input conditionally with Vue.js, we set the disabled prop.

Categories
Vue Answers

How to force Vue.js to reload or re-render?

Labrador retriever puppy walking on green grass

Sometimes, we want to force Vue.js to reload or re-render.

In this article, we’ll look at how to force Vue.js to reload or re-render.

How to force Vue.js to reload or re-render?

To force Vue.js to reload or re-render, we use the $forceUpdate method.

For instance, we write

this.$forceUpdate();

to call this.$forceUpdate(); in our component to force the component to re-render.

Conclusion

To force Vue.js to reload or re-render, we use the $forceUpdate method.

Categories
Vue Answers

How to remove hashbang #! from URL with Vue.js and Vue Router?

Labrador retriever puppy walking on green grass

Sometimes, we want to remove hashbang #! from URL with Vue.js and Vue Router.

In this article, we’ll look at how to remove hashbang #! from URL with Vue.js and Vue Router.

How to remove hashbang #! from URL with Vue.js and Vue Router?

To remove hashbang #! from URL with Vue.js and Vue Router, we disable hash mode.

For instance, we write

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  // ...
});

with Vue Router 4 to call createWebHashHistory and set= the returned value as the value of the history property to disable hash mode.

With Vue Router 3, we write

const router = new VueRouter({
  mode: "history",
  // ...
});

to create a VueRouter instance with mode set to 'history' to disable hash mode.

Conclusion

To remove hashbang #! from URL with Vue.js and Vue Router, we disable hash mode.