CODEWITHSUNDEEP
vue.jsnuxt.js
Jonas
Jonas

Reputation: 7875

Vue: How to use Directives from Libraries

Im trying to use this library: https://github.com/rigor789/vue-scrollto

But Im having trouble using it and the instructions are not very helpful to me. it says I should do this:

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

But I have no idea where to do this. So I have tried just using it like this:

<template>
  <div>
    <Navbar/>
    <Cover/>
    <button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
    <Offers/>
    <AboutUs id="about"/>
    <Info/>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import Cover from '@/components/main/Cover'
import Offers from '@/components/main/Offer/Offers'
import AboutUs from '@/components/main/AboutUs'
import Info from '@/components/main/Info'
import Menu from '@/components/main/menu/Menu'

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

export default {
  components: {
    Navbar,
    Cover,
    Offers,
    AboutUs,
    Info,
    Menu
  }
}
</script>

But that doesn't work. So how do I import libraries properly so I can use the directives?

Upvotes: 1

Views: 1301

Answers (2)

Jonas
Jonas

Reputation: 7875

So bacause I use Vue it did the following:

create a new file called nuxt-scroll-to.js in the plugins folder with this code:

import Vue from 'vue';
import VueScrollTo from 'vue-scrollto/vue-scrollto.js';

Vue.use(VueScrollTo)

and the in the nuxt.config.js array add this code: { src: '~/plugins/nuxt-scroll-to.js', ssr: false },

Upvotes: 1

lmarqs
lmarqs

Reputation: 1471

Try to use import instead of using require.

The es6 script will be transpiled to old js versions when you build the app.

<template>
  <div>
    <Navbar/>
    <Cover/>
    <button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
    <Offers/>
    <AboutUs id="about"/>
    <Info/>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import Cover from '@/components/main/Cover'
import Offers from '@/components/main/Offer/Offers'
import AboutUs from '@/components/main/AboutUs'
import Info from '@/components/main/Info'
import Menu from '@/components/main/menu/Menu'

import Vue from 'vue';
import VueScrollTo from 'vue-scrollto';

Vue.use(VueScrollTo)

export default {
  components: {
    Navbar,
    Cover,
    Offers,
    AboutUs,
    Info,
    Menu
  }
}
</script>

Upvotes: 1

Related Questions