Category: Vue Answers

Sometimes, we want to upload an image in Vue.js.

In this article, we’ll look at how to upload an image in Vue.js.

How to upload an image in Vue.js?

To upload an image in Vue.js, we can add a file input.

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: `
    <p>
      <input type="file" accept="image/*" @change="uploadImage">
      <img :src="previewImage" />
    </p>
  `,
  data: {
    previewImage: undefined
  },
  methods: {
    uploadImage(e) {
      const [image] = e.target.files;
      const reader = new FileReader();
      reader.readAsDataURL(image);
      reader.onload = e => {
        this.previewImage = e.target.result;
        console.log(this.previewImage);
      };
    }
  }
})

We add the file input and img element to preview the image.

Then we set the change event handler of the input to uploadImage.

In uploadImage, we get the first selected file from e.target.files.

Then we create a new FileReader instance and call readAsDataURL with image to read it into a base64 string.

Then we set this.previewImage to `e.target.result, which has the base64 image string.

As a result, when we select an image with the file input, we see the image displayed.

Conclusion

To upload an image in Vue.js, we can add a file input.

Sometimes, we want to get the content of a contentEditable element with Vue.js.

In this article, we’ll look at how to get the content of a contentEditable element with Vue.js.

How to get the content of a contentEditable element with Vue.js?

To get the content of a contentEditable element with Vue.js, we can listen to the input event on the contentEditable 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: `
    <p
      contenteditable
      @input="onInput"
    >
      {{ content }}
    </p>
  `,
  data: {
    content: 'hello world'
  },
  methods: {
    onInput(e) {
      console.log(e.target.innerText);
    },
  },
})

We have a contentEditable p element.

And we listen to the input event with @input="onInput".

And we get the content of the div when it’s being changed with e.target.innerText.

We put the initial content of the p element in content.

Conclusion

To get the content of a contentEditable element with Vue.js, we can listen to the input event on the contentEditable element.

Sometimes, we want to inject elements into the head element with Vue.js and JavaScript.

In this article, we’ll look at how to inject elements into the head element with Vue.js and JavaScript.

How to inject elements into the head element with Vue.js and JavaScript?

To inject elements into the head element with Vue.js and JavaScript, we can use the vue-head library.

To use it, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.rawgit.com/ktquez/vue-head/master/vue-head.js"></script>


<div id='app'>

</div>

to add the Vue and vue-head scripts with the app container element.

Then we write:

const v = new Vue({
  el: '#app',
  template: '<p>hello</p>',
  data: {
    title: 'My Title'
  },
  head: {
    title() {
      return {
        inner: this.title
      }
    },
    meta: [{
      name: 'description',
      content: 'My description'
    }]
  }
})

to add the head property which is set to an object with the title method which returns the title we want to render.

We also have a meta property set to an array to set the meta tag data.

As a result, we should see the title of the page set to My Title and:

<meta name="description" content="My description">

rendered in the head tag.

We can also install by running npm install vue-head --save and register it with:

import Vue from 'vue'
 
Vue.use(VueHead)
//...

Then we can follow the same steps as before.

Conclusion

To inject elements into the head element with Vue.js and JavaScript, we can use the vue-head library.

Sometimes, we want to fix the ‘Vue is not defined’ with JavaScript.

In this article, we’ll look at how to fix the ‘Vue is not defined’ with JavaScript.

How to fix the ‘Vue is not defined’ with JavaScript?

To fix the ‘Vue is not defined’ with JavaScript, we should make sure the Vue script is added at the top of the page.

For instance, we write:

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

<div id='app'>

</div>

to add the script above the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `<p>{{exampleContent}}</p>`,
  data: {
    'exampleContent': 'hello'
  },

});

in a script tag below the div to run the code

We set el to an element that’s added above the code.

And we also add a template and some data to render on the template.

Therefore, we should see ‘hello’ displayed.

Conclusion

To fix the ‘Vue is not defined’ with JavaScript, we should make sure the Vue script is added at the top of the page.