Category: Vue

Sometimes, we want to check if image URL is valid or broken with Vue.js.

In this article, we’ll look at how to check if image URL is valid or broken with Vue.js.

How to check if image URL is valid or broken with Vue.js?

To check if image URL is valid or broken with Vue.js, we can handle the error event triggered by the img element.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div>
    	<img src='abc' @error='onError'>
    </div>
  `,
  methods: {
    onError() {
      console.log('img failed to load')
    }
  }
})

to add an img element into the template.

And we set @error to onError to run onError when the image fails to load.

Since the img element’s src attribute isn’t a valid URL, onError will run.

Conclusion

To check if image URL is valid or broken with Vue.js, we can handle the error event triggered by the img element.

Sometimes, we want to run a function on input but with a delay with Vue.js and JavaScript.

In this article, we’ll look at how to run a function on input but with a delay with Vue.js and JavaScript.

How to run a function on input but with a delay with Vue.js and JavaScript?

To run a function on input but with a delay with Vue.js and JavaScript, we can use setTimeout.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div>
    	<input @input='onInput'>
      <div v-if='!isHidden'>hello</div>
    </div>
  `,
  data: {
    isHidden: true
  },
  methods: {
    onInput() {
      setTimeout(() => this.isHidden = false, 500);
    }
  }
})

to call onInput when the input event is triggered.

In onInput, we call setTimeout with a callback that sets this.isHidden to false to unhide the div after 500 milliseconds.

We use the v-if to only show the div with isHidden is false.

Conclusion

To run a function on input but with a delay with Vue.js and JavaScript, we can use setTimeout.

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:

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

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
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)"
      ],
      env: {
        jest: true
      }
    }
  ]
};

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.