CODEWITHSUNDEEP
vue.js
Zbyszek Kisły
Zbyszek Kisły

Reputation: 2238

Where should I put Vue.use() method in code?

I want to use one plugin for vue and in the documentation it says I have to put in the code

import ReadMore from 'vue-read-more';

Vue.use(ReadMore);

I have no problem putting import near other imports, but where I should put the Vue.use?

here's my code structure:

import TextBox from '../TextBox.vue'
import $ from 'jquery'

export default{
  ready: function () {
    //stuff
  },
  data () {
    return {
      name: '',
      email: ''
    }
  },
  components: {
    TextBox
  },
  methods: {
    sendContact: function (e) {
      //stuff
    }
  }
}

The application author doesn't work anymore in the company so I'm unable to ask him about the code.

Upvotes: 1

Views: 1480

Answers (2)

Imre_G
Imre_G

Reputation: 2535

I would suggest that instead of importing a library you implement this: 

<template>

<p>
  <span>This is the first text</span><span v-show = "readMore">This is the read more text</span>
  <a v-show = "!readMore" @click = "readMore=true">Read More</a>
  <a  v-show = "readMore" @click = "readMore=false">Read Less</a>
  </p>
</template>


<script>
  import TextBox from '../TextBox.vue'
  import $ from 'jquery'

  export default{
    ready: function () {
      //stuff
    },
    data () {
      return {
        readMore: false,
        name: '',
        email: ''
      }
    },
    components: {
      TextBox
    },
    methods: {
      sendContact: function (e) {
        //stuff
      }
    }
  }
</script>

Upvotes: 1

Sergeon
Sergeon

Reputation: 6788

A good thing you can do to learn about this is to install the vue cli, setup a new blank project, and check out how this is handled in a standard vue cli application (it is done in the main.js file).

In your own application, if it was generated by vue-cli (or at least it follows some standards), it is likely that main.js imports Vue, creates a new Vue instance and mounts it in some tag (typically #app).

Now, however, there could be the case that your app is not generated by vue cli or doesn't have a standard main.js file: this is not necessarily a bad thing, since Vue is intended to be easily plugged into an existing jQuery website or other framework driven applications. From the code you pasted, it seems that this is the case.

If so, you should search in your project for import Vue and new Vue to find the file(s) that instantiates the Vue instance. You should then call to Vue.use() right after Vue is imported and before any new Vue() call.

Upvotes: 3

Related Questions