scrollTo with vue single file components, how does it work?

[Lucas186]

hey guys i'm working on an page and want to integrate the scrollTo plugin in the navbar. It's all vue single file components and i dont know how i should write it.

For code pen it's to many components. Example: i want to scroll to an text group which div is named id="wearedifferent".

in the navbar file it is this in the script tag:

<script>

import { Vue, Component } from 'vue-property-decorator';

import { TweenLite } from 'gsap';

 

@Component({})

export default class Navbar extends Vue {

mounted() {

this.scrollTo();

}

destroyed() {

window.removeEventListener('scrollTo', this.scrollTo());

}

 

scrollTo() {

window.addEventListener('scrollTo', () => {

TweenLite.to(this.$refs.weAreDifferent, 1, { scrollTo: '#wearedifferent' });

});

}

}

</script>

 

thats in the template section: 

<b-navbar-nav>

<b-nav-item @click="scrollTo()">Wir sind anders</b-nav-item>

<b-nav-item href="#">Jobs</b-nav-item>

<b-nav-item href="#benefits">Benefits</b-nav-item>

<b-nav-item href="#">Social</b-nav-item>

</b-navbar-nav>

 

first i tried it with href, but its not so smooth like scollTo. could anyone help me?

[GreenSock]

It looks like you forgot to import ScrollToPlugin. And you might want to reference it directly in your code somewhere just so your bundler doesn't dump it with tree shaking. 

 

As for the rest of your question, it sounds like maybe it's more Vue-specific but correct me if I'm wrong. We're happy to answer any GSAP-specific questions. I'm personally not familiar with Vue.