oleksiikhr / vue-stripe-menu

Creating a navigation menu with animations like on Stripe

Home Page:https://oleksiikhr.github.io/vue-stripe-menu/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nuxt setup issue

mattbag opened this issue · comments

commented

It might be me but I can't load it on Nuxt.
Steps:

  • Install pkg
  • Create plugin file with snippet outlined in this page.
  • Create a component containing the copied from the demo block

Error about component registration:

Unknown custom element: <vsm-menu> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Thanks

Thanks for the issue, after work I will try to install on Nuxt and tell you

Install Nuxt. Add settings in nuxt.config.js:

export default {
  css: ['vue-stripe-menu/dist/vue-stripe-menu.css'],
  plugins: ['@/plugins/vue-stripe-menu']
}

Add file to plugins/vue-stripe-menu.js:

'use strict'

import Vue from 'vue'
import VueStripeMenu from 'vue-stripe-menu'

export default () => {
  Vue.use(VueStripeMenu)
}

Changed the code in .vue as in the example and I don’t see errors. And yes, the menu works :)

If you need to change sass variables in the library, then:

nuxt.config.js

export default {
  css: ['@/assets/css/main.scss'],
  plugins: ['@/plugins/vue-stripe-menu']
}

assets/css/main.scss

// You can resize for "@media only screen":
$vsm-media: 500px;

// Colors:
$vsm-color: #000;
$vsm-color-hover: rgba(0, 0, 0, .9);

// And also you can see the animation in slow motion:
$vsm-transition: 1s;

@import "~vue-stripe-menu/src/scss/index";
commented

Yes it works, also without export func

'use strict'

import Vue from 'vue'
import VueStripeMenu from 'vue-stripe-menu'

Vue.use(VueStripeMenu)

Thanks a lot!