Failed to resolve directive: bar

[jankulma]

I am having really hard time trying to set up vuebar. All the CSS settings I have as recommended. I think there must be sth obvious I am missing, as I am novice with vue.

My code:

<template>
  <div id="app">
    <div class="content" v-bar>
      _lorem paragraphs..._
    </div>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>
  #app {
    position: relative;
    overflow: hidden;
  }
  .content {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 400px;
    -ms-overflow-style: scrollbar;
    width: 400px;
  }
</style>

The error in the console is:

[Vue warn]: Failed to resolve directive: bar
(found in <Anonymous>)

And the scrollbar stays unchanged. I use vue-cli with webpack, chrome browser, ubuntu os. Any suggestions?

[borodinalive]

How do you import and apply this plugin?

[jankulma]

I install it via npm npm install vuebar --save

[DominikSerafin]

@jankulma this only adds the package to your project node_modules, but it doesnt't automatically install it. You need to import and install it in your main project entry point (e.g. main.js).

Like so:

import Vuebar from 'vuebar';
Vue.use(Vuebar);

Or:

var Vuebar = require('vuebar');
Vue.use(Vuebar);

[borodinalive]

This is what I am asking about =)

[jankulma]

I was missing that. Thanks a lot.

[Deleted user]

@jankulma this only adds the package to your project node_modules, but it doesnt't automatically install it. You need to import and install it in your main project entry point (e.g. main.js).

Like so:

import Vuebar from 'vuebar';
Vue.use(Vuebar);

Or:

var Vuebar = require('vuebar');
Vue.use(Vuebar);

I am using the cdn way and I receive this same mistake.