Giter VIP home page Giter VIP logo

vue-stripe-menu's Introduction

Vue Stripe Menu

Build Status Netlify Status Version Total alerts Downloads License

Vue Stripe Menu

Creating a navigation menu with animations like on Stripe

Only for Vue 3 (changelog)

Documentation

Vue 2 - Branch

How to install

Install the library in your project:

$ npm i -D vue-stripe-menu

// $ yarn add -D vue-stripe-menu
// $ pnpm add -D vue-stripe-menu

Import components:

// >>> Install globally - .js file <<<

import { createApp } from 'vue'
import VueStripeMenu from 'vue-stripe-menu'

createApp({}).use(VueStripeMenu)

// >>> Install locally - .vue file <<<

import { VsmMenu, VsmMob } from 'vue-stripe-menu'

export default {
  components: {
    VsmMenu, VsmMob
  }
}

// Optionally if you don't want to use @import in your
// <style> section (because its scoped for example):
// import 'vue-stripe-menu/css'

Add the component:

<template>
  <vsm-menu :menu="menu">
    <template #default="{ item }">
      <div style="width: 300px; padding: 30px">
        Dropdown content - {{ item.title }}
      </div>
    </template>
    <template #before-nav>
      <li class="vsm-mob-full">
        Left side
      </li>
    </template>
    <template #after-nav>
      <li class="vsm-mob-hide">
        Right side
      </li>
      <vsm-mob>
        <div style="min-height: 200px; padding: 30px">
          Mobile Content
        </div>
      </vsm-mob>
    </template>
  </vsm-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { title: 'Item1', dropdown: 'dropdown-1' },
        { title: 'Item2', dropdown: 'dropdown-2' },
        { title: 'Just link', attributes: { href: '#clicked' } },
      ]
    }
  }
}
</script>

Add css/scss styles:

// >>> SCSS style (required sass-loader, node-sass) <<<
// https://github.com/oleksiikhr/vue-stripe-menu/blob/main/src/scss/_variables.scss
// $vsm-transition: .5s;

@import "~vue-stripe-menu/scss";

// >>> CSS style <<<
// @import 'vue-stripe-menu/css';

.vsm-menu {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}

.vsm-nav {
  margin: 0 10px;
}

.vsm-link-container {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .vsm-mob-show {
    display: block;
  }
  .vsm-mob-hide {
    display: none;
  }
  .vsm-mob-full {
    flex-grow: 1;
  }
}

Full Example

<template>
  <vsm-menu
    :menu="menu"
    element="header"
    handler="hover"
    align="center"
    :screen-offset="10"
    :dropdown-offset="0"
    @open-dropdown="onOpenDropdown"
    @close-dropdown="onCloseDropdown"
  >
    <template #default="{ item }">
      <!--Dropdown content of each menu item with a "dropdown" property-->
      <!--You can replace it with a separate component if each menu item has its own style-->
      <!--Necessarily need to have at least one element within the slot-->
      <!--An alternate background will be applied from the 2nd element-->
      <div style="width: 300px; padding: 30px">
        Header: {{ item }}
      </div>
      <div style="padding: 30px">
        Second element
      </div>
    </template>
    <template #before-nav>
      <!--Image or svg of website logo-->
      <li style="width: 50px; height: 50px">
        <img
          src="https://vuejs.org/images/logo.png"
          alt="My Logo"
        >
      </li>
    </template>
    <template #title="data">
      <!--Display menu items through slots-->
      {{ data.item.title }}
    </template>
    <template #after-nav>
      <!--Mobile Burger, buttons, etc-->
      <li class="vsm-mob-hide">
        <button>My Button</button>
      </li>
      <!--Set "display: block" for the .vsm-mob-show class to display content-->
      <vsm-mob>Mobile Content</vsm-mob>
    </template>
  </vsm-menu>
</template>

<script>
/*
 * Inside #after-nav and #before-nav it is recommended to use
 * to maintain the correct HTML structure:
 *   <li><!--Content--></li>
 */

export default {
  data() {
    return {
      menu: [
        {
          // display menu item (can be overridden with title slot)
          title: 'News',
          // this element now has dropdown content
          dropdown: 'news',
          // don't want a button element? Pass HTMLElement or global component
          // (pass only as a string, component must be globally accessible)
          element: 'span', // div, router-link, nuxt-link, custom-component
          // offset the position of the dropdown menu
          align: 'center',
          // menu item can accept all attributes
          attributes: {
            // I want more classes! No problem
            // string, array, object, not matter
            class: ['my-class1', { 'my-class2': true }],
            // Custom attributes
            'data-big': 'yes'
          },
          // add some events?
          listeners: {
            // all possible native events
            mouseover: (evt) => {
              console.log('news hover', evt)
            }
          },
          // just extra properties in the object
          customAttribute: true,
        },
        {
          title: 'External Link',
          attributes: {
            href: 'https://github.com/oleksiikhr/vue-stripe-menu',
            target: '_blank'
          }
        }
        // ...
      ]
    }
  },
  methods: {
    onOpenDropdown() {
      console.log('onOpenDropdown')
    },
    onCloseDropdown() {
      console.log('onCloseDropdown')
    }
  }
}
</script>

API

[Menu] Props

Property Parameters Description Type Default Required
menu MenuObject Description of the menu items array true
element HTMLElement for the root element string header false
screen-offset Offset from the window screen string, number header false
dropdown-offset Offset from the dropdown menu string, number header false
transition-timeout Animation speed in ms (equals $vsm-transition scss) string, number 250 false
handler hover, click On what event to open dropdown menu string hover false
align center, left, right Offset the position of the dropdown menu string center false

[Menu] Events

Name Description Return
open-dropdown Open the dropdown menu, return the active HTMLElement HTMLElement
close-dropdown Close the dropdown menu, return the closed HTMLElement HTMLElement

[Menu] Slots

Name Parameters Description
default MenuItem, index The main content for the dropdown list
before-nav before-nav Content to the left of the list
after-nav after-nav Content to the right of the list
title MenuItem, index Replace the output of menu[i].title with your own

[Menu] Methods

this.$refs[myVsmRef].closeDropdown()

Name Parameters Description Return
toggleDropdown HTMLElement Open dropdown menu, if it is an active HTMLElement - close
openDropdown HTMLElement Open dropdown menu for selected HTMLElement
closeDropdown Close active dropdown menu
resizeDropdown Recalculate size and location of dropdown menu

[Menu] Properties

this.$refs[myVsmRef].itemsWithDropdown

Name Description Return
itemsWithDropdown Filtered menu items with "dropdown" property Array<MenuObject>
elementsWithDropdown List of HTMLElements that have dropdown content Array<MenuObject>
dropdownContainerItems List of dropdown HTMLElements Array<{el: HTMLElement, name: string, content: HTMLElement}>

[Menu] MenuObject (menu props)

Property Type Description
title string Menu item name. Can also be redefined through the slot
dropdown string Unique value indicates that this item has a dropdown menu
align string Offset the position of the dropdown menu (center/left/right)
element string HTMLElement or global component in the header element, if not specified, it will be or
attributes object All attributes to be assigned in the header element (v-bind)
listeners object All events to be assigned in the header element (v-on)

[Mob] Props

Property Parameters Description Type Default Required
v-model The state of the open/close the menu boolean false false

[Mob] Slots

Name Parameters Description
default Main content
hamburger Replace hamburger button
close Replace close button

[Mob] Methods

this.$refs[myVsmMobRef].closeDropdown()

Name Parameters Description Return
closeDropdown Close dropdown menu

Classes

Name Description
vsm-mob-show Show HTMLElements in mobile design
vsm-mob-hide Hide HTMLElements in mobile design

Contributing

Please make sure to read the Contributing Guide before making a pull request.

Changelog

Detailed changes for each release are documented in the CHANGELOG.md.

License

MIT

vue-stripe-menu's People

Contributors

alexanderhorner avatar dependabot-preview[bot] avatar dependabot[bot] avatar oleksiikhr avatar piterden avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue-stripe-menu's Issues

problem with z-index

First of all thanks for ur good library.
Why z-index does not work and drop down menu.
as u can see
2020-02-24_0-30-57
the menu is under the section and how can i solve it?

Decimal position values

In 1.2.9 the translate-x value on vsm-dropdown-container can get decimal pixel values - which results in noticeble font blurring.

In 1.2.4 the issue cannot be reproduced. As far as I can see, the rounding was - probably unintentionally - removed in ec99f82, with the revamp of calc logic.

Mobile scroll issue

Hello, I am having trouble being able to add any css that will allow the vsm-mob-content to scroll (when the amount fills the height of the screen). Do you have any suggestions?

Can't import the css

Describe the bug
When trying to import the css I get an error.

[vite] Internal server error: Missing "./dist/vue-stripe-menu.css" export in "vue-stripe-menu" package
import 'vue-stripe-menu/dist/vue-stripe-menu.css'

I think you have to define it as an export or something like that (not an npm expert)

Using / for division is depreciated

Receiving this warning when I build my project:

100 │     right: $vsm-mob-close-size / 4;
    │            ^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/vue-stripe-menu/src/scss/mob.scss 100:12  @import
    node_modules/vue-stripe-menu/src/scss/index.scss 2:9   @import
    stdin 2:9                                              root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($vsm-mob-close-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

Margin causes different colour background in dropdown menu?

I've setup a simple demo to test things out and I've noticed when I just use a <p> tag, its margin causes a different coloured background to show up? - I'm not sure how to get rid of this or why it is even there? I just want the dropdown menu to be white.

I've reproduced the issue here: https://codepen.io/embluk/pen/NWgPqvL

Here is a screenshot of the problem:
image

You see how the margin of the <p> causes a change in background colour compared to the white background?

Nuxt setup issue

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

How to use with nuxt ?

I added a plugin

/plugins/menu.js

'use strict'
import Vue from 'Vue'
import VueStripeMenu from 'vue-stripe-menu'
import 'vue-stripe-menu/dist/vue-stripe-menu.css'

Vue.use(VueStripeMenu)

And i got a lot of error,

 WARN  in ./node_modules/Vue/dist/vue.runtime.esm.js                                                                                                           friendly-errors 16:39:26  

There are multiple modules with names that only differ in casing.                                                                                              friendly-errors 16:39:26  
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\node_modules\Vue\dist\vue.runtime.esm.js
    Used by 2 module(s), i. e.
    D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\node_modules\babel-loader\lib\index.js??ref--2-0!D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\pl
ugins\menu.js
* D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\node_modules\vue\dist\vue.runtime.esm.js
    Used by 80 module(s), i. e.
    D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\node_modules\babel-loader\lib\index.js??ref--2-0!D:\WorkFolder\Devlopment\personnal\Taff\DPliance\DPlianceWebsite\.n
uxt\client.js
                                                                                                                                                               friendly-errors 16:39:26  

 ERROR  Failed to compile with 70 errors                                                                                                                       friendly-errors 16:39:26  

These dependencies were not found:                                                                                                                             friendly-errors 16:39:26  
                                                                                                                                                               friendly-errors 16:39:26  
* core-js/modules/es6.array.find in ./.nuxt/client.js                                                                                                          friendly-errors 16:39:26  
* core-js/modules/es6.array.from in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                      friendly-errors 16:39:26  
* core-js/modules/es6.array.iterator in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheHeader.vue?vue&typ
e=script&lang=js& and 2 others
* core-js/modules/es6.date.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                  friendly-errors 16:39:26  
* core-js/modules/es6.function.name in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                   friendly-errors 16:39:26  
* core-js/modules/es6.number.constructor in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TeaserColumn.vue?vue&type=script&lan
g=js&, ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js
* core-js/modules/es6.object.assign in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheHeader.vue?vue&type
=script&lang=js& and 2 others
* core-js/modules/es6.object.keys in ./.nuxt/client.js, ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js                                          friendly-errors 16:39:26  
* core-js/modules/es6.object.set-prototype-of in ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js                                                 friendly-errors 16:39:26  
* core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 2 others                                               friendly-errors 16:39:26  
* core-js/modules/es6.promise in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheHeader.vue?vue&type=scrip
t&lang=js& and 2 others
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js, ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js                                    friendly-errors 16:39:27  
* core-js/modules/es6.regexp.match in ./.nuxt/client.js, ./node_modules/vue-stripe-menu/dist/vue-stripe-menu.common.js                                         friendly-errors 16:39:27  
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js and 1 other                                                               friendly-errors 16:39:27  
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js                                                                                                        friendly-errors 16:39:27  
* core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicat
or.vue?vue&type=script&lang=js& and 1 other
* core-js/modules/es6.regexp.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                friendly-errors 16:39:27  
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                 friendly-errors 16:39:27  
* core-js/modules/es6.string.iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                 friendly-errors 16:39:27  
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js                                                                                                        friendly-errors 16:39:27  
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js                                                                                                   friendly-errors 16:39:27  
* core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                          friendly-errors 16:39:27  
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                  friendly-errors 16:39:27  
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js                                                                                  friendly-errors 16:39:27  
* core-js/modules/es7.promise.finally in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheHeader.vue?vue&ty
pe=script&lang=js& and 2 others
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                           friendly-errors 16:39:27  
* core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other                                                    friendly-errors 16:39:27  
                                                                                                                                                               friendly-errors 16:39:27  
To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.from core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core
-js/modules/es6.function.name core-js/modules/es6.number.constructor core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.set-prototype-of core-j
s/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6
.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.r
epeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.pr
omise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable

How to use with nuxt ?

Needs better a11y compliancy

First off, great work! I always loved the stripe dropdowns and you did a bang up job implementing it.

Is there any way to make this more navigable via keyboard and hense more a11y compliant? The main section seem accessible by tab order, but you cannot seem to navigate into the subsections via cursor key or tabs. If you could add this, then you would make your plugin absolutely perfect.

problem to show sub menus

2020-01-29_12-28-48
what is wrong with this?
i copied your codes and i have this problem.
this is my code

data() {
          return {
              menu: [
                  { title: 'First item', dropdown: 'first' },
                  { title: 'Second item', dropdown: 'second' },
                  { title: 'No dropdown' }
              ]
          }
      }
      ,
      methods: {
          onOpenDropdown() {
              console.log('onOpenDropdown')
          }
          ,
          onCloseDropdown() {
              console.log('onCloseDropdown')
          }
      }
      
]




and this is the vue

<template>
<div>
        <vsm-menu :menu="menu">
            <template #default="data">
                <div>{{ data }}</div>
            </template>
        </vsm-menu>


    </div>
</template>

thanks for your help

router-link

For first-level items, how add links using router-link?

How I can use in Vue 2

Hi, how can i use it in vue 2, i have a project in vue 2 and i am getting the following error :
"TypeError: Cannot read property 'element' of undefined",
and i guess it is because i am using that version of vue, some help please
thanks

Awesome work 😎, I need help about dynamic component~

First, thank you for that amazing work, the menu and animation work so great also it had all option that we need, I had read the documentation but I couldn't manage to add the dynamic component, that's my problem because I just start learning Vue last week, it will be very nice if you can show me how to add a dynamic component.

I added the mean Vue bellow of the component

export default {
  name: 'HeroMenu',
  data() {
    return {
      menu: [
        {   title: 'Topbright',
            dropdown: 'topbright',
            element: 'v-btn',
            content: 'menuOne',
            attributes: {
            'text': ''
          },
        },
        {   title: 'Science Can',
            dropdown: 'sciencecan',
            element: 'v-btn',
            content: 'menuTow',
            attributes: {
            'text': ''
          },
        },
      ]
    }
  }
}

then I added in the same file the template for menuOne and menuTwo

Vue.component('menuOne', {
  template: `
    <h1>
    Hi I am Menu One!
    </h1>
  `
})

Vue.component('menuTwo', {
  template: `
    <h1>
    Hi I am Menu Two!
    </h1>
  `
})

I know I did something wrong, could you please guide me to add dynamic component

real demo

hi

could we get real working demo,
with proper links and images beside them
instead of placeholders?

Support for NuxtJS

I am having a little trouble registering the components in NuxtJS. I've tried importing it explicitly to using it as a plugin, still not recognizing the <vsm-menu> or <vsm-mob> components. Kindly help out.

Gap between menu and dropdown in safari

when using vsm menu in safari there is a gap between the bar and the dropdown.

Probably due to the inline transform-translate css.

Is there a workaround?

safari
screen1

all others
screen2

Conflicts with Nuxt/Vuetify

This is what I'm getting out of the gate:

Screen Shot 2020-11-02 at 1 48 33 PM

Fresh install of Nuxt with Vuetify, vue-stripe-menu is added as a plugin. Example code is inserted as a AppNav.vue component included in the default layout.

Not sure what's conflicting. Is there an existing fix for this?

Backport new feature for vue2

Is your feature request related to a problem? Please describe.
Our project can't migrate to vue3 immediately.
Describe the solution you'd like
The latest version includes some new feature and breaking change between vue2 version. To prevent upgrading to vue3 will occur to compatibility issues because of API changes. We need a vue2 compat versoion.

Describe alternatives you've considered
Modify the vue2 code to the vue3 code in the future.

Dropdown arrow

Hello everybody!

Anyone knows how to use the "drop down arrow" in vue stripe menu? I checked up this small guide of variable list. link
but still does not work. May somebody can help and know more than me. Would be thankful!

Adding Dropdown Data

How can I add/pass the dropdown elements (text, group)?

Your demo example is not clear enough in that case.

demo is error

Nodejs : v14.0.0
Vue : @vue/cli 4.3.1

Show results:
Y6R_@} 9LAFM7$86_JX}E

Support for Bootstrap

Using the menu in a bootstrap setup renders the submenu off by quite some pixels.

Possibility add another event by default (click) ?

Hi.
Thank you for great work, awesome component.

I faced with a problem where it was necessary to call dropdowns by click event by default.

I found not the most best solution, but it works...

onMounted(() => {
      refs.VsmMenu.unregisterGlobalEvents();

      refs.VsmMenu.hasDropdownEls.forEach((el) => {
        const currentElement = el;
        const cloneElement = currentElement.cloneNode(true);

        currentElement.parentNode.replaceChild(cloneElement, currentElement);

        cloneElement.addEventListener('click', (event) => {
          event.preventDefault();
          
          refs.VsmMenu.toggleDropdown(cloneElement);
      });
    });
});

Are there any plans to make a choice of the event call by default?

Menu autoclosing when used in an appbar component

Thanks for the work you've put into this - it's really good!

I'm having trouble when using this in an appbar component. It seems if I place the stripe-menu in an appbar component, whenever I move the mouse off the appbar component the focus is lost and the menu closes.

A quick video should (hopefully) explain what I mean:

https://imgur.com/J4Qdioq

My App.vue looks like:

<template>
  <div>
    <v-app :style="{ background: $vuetify.theme.themes.light.background }">
      <v-content>
        <Appbar></Appbar>

And it is in this Appbar component I'm placing the stripe-menu:

<template>
  <div>
    <v-app-bar
      flat
      app
      hide-on-scroll
      color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
      v-if="!this.$store.getters.fullScreen"
    >
      <v-row>
 ...
        <v-col cols="4" class="d-flex justify-end">
          <vsm-menu
            ref="header"
            :menu="menu"
            :screen-offset="25"
            :base-width="380"
            :base-height="400"
          >
            <template #default="data">
              <component :is="data.item.content" class="content" />
              <component :is="data.item.secondary" class="content--secondary" />
            </template>
          </vsm-menu>
        </v-col>
        <v-spacer></v-spacer>

I'm using Vuetify, so the appbar has a default height of 64px. If my mouse scrolls outside of this appbar, the menu loses focus.

Is there and quick workaround or have I missed something obvious? I'm not sure if it's related to Vuetify (it could very well be but I have no idea where to begin looking it's not the nicest to dig into).

It's not the <v-app-bar> component - I've tried without it. It seems it loses focus if the mouse goes outside of the component that contains the strip-menu.

Dropdown menu

how can I add a dropdown menu using separate component

Using <nuxt-link> with Stripe Menu

Hi. I have a problem with stripe-menu when using link. If menu item is a link inside website, I must use link with nuxt-link as below.

Because if I use it with , NuxtJS render all page again. How to force stripe-menu link with nuxt-link

Is there a option for it? Thank you.

Burger symbol missing

Hi
i have all installed as writen in the guide but the burger symbol seems to be missing?

Improved docs or handling for closing the mobile menu

Was having trouble figuring out how to close the mobile menu programatically. On desktop one can bind to the ref method closeDropdown(), but for mobile there's no such method. For mobile, it's possible to bind a v-model to the vsm-mob component and switch it to true or false programatically. However, closeDropdown() would make more sense as handling the mobile dropdown as well. Or at least put in the docs that one can bind v-model to vsm-mob.

Pass menu data

Hello Alexey,
First of all thank you for beautiful project. I have a question about passing data/links to dropdown list. How i can do this?
For example can i do this from data section, adding a child items to "Info"?

data () {
    return {
      menu: [
        { title: 'Info', dropdown: 'info', content: HorizontalPrimaryContent, secondary: HorizontalSecondaryContent },
      ]
    }
  }

Thank you!

Question about mobile

Currently viewing on my phone, but the demo doesn't show a mobile version of the navigation. Do you have any plans to incorporate this?

Named export 'VsmMenu' not found.

I'm getting an error related with named exports that I believe to be related with newer NodeJS versions. I'm using Node 19.0.0.

import { VsmMenu, VsmMob } from "vue-stripe-menu";
         ^^^^^^^
SyntaxError: Named export 'VsmMenu' not found. The requested module 'vue-stripe-menu' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vue-stripe-menu';
const { VsmMenu, VsmMob } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:518:24)
    at async loadESM (node:internal/process/esm_loader:102:5)
    at async handleMainPromise (node:internal/modules/run_main:66:12)

Node.js v19.0.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.