Category: Vue

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.

Sometimes, we want to draw onto a canvas with Vue.js and JavaScript.

In this article, we’ll look at how to draw onto a canvas with Vue.js and JavaScript.

How to draw onto a canvas with Vue.js and JavaScript?

To draw onto a canvas with Vue.js and JavaScript, we can get the canvas with refs and then draw on it with fillText.

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: `<canvas ref='canvas' style='width: 200px; height: 200px'></canvas>`,
  data: {
    'exampleContent': 'hello'
  },
  methods: {
    updateCanvas() {
      const {
        canvas
      } = this.$refs
      ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.font = "20px Georgia";
      ctx.fillText(this.exampleContent, 10, 50);
    }
  },
  mounted() {
    this.updateCanvas();
  }
});

We add the canvas element into the template.

Then we set the exampleContent property to 'hello'.

Next, we add the updateCanvas method that gets the canvas from this.$refs.

Then we get the context with getContext.

Next, we call clearReact to clear its contents.

Then we set the fillStyle and font to set the fill and font style of the text.

And then we call fillText with this.exampleContent and coordinates to write text into the canvas.

Finally, we call this.updateCanvas in the mounted to write the text with the canvas is loaded.

Conclusion

To draw onto a canvas with Vue.js and JavaScript, we can get the canvas with refs and then draw on it with fillText.