Storybook: When i using the Nuxt.js, how to attachment `router-link`?

Created on 7 Feb 2018  路  3Comments  路  Source: storybookjs/storybook

Issue details

When i using the Nuxt.js, how to attachment router-link or nuxt-link?

Steps to reproduce

Nuxt router is not showing routes file on dev mode.
how to set the vue-router > router-link or nuxt-link?

I wrote below codes. but, displayed "TypeError: Cannot read property 'resolve' of undefined" message.

Please specify which version of Storybook and optionally any affected addons that you're running

Screenshots / Screencast / Code Snippets (Optional)

import VueRouter  from 'vue-router';
Vue.use(VueRouter);

import NuxtLink from 'nuxt/lib/app/components/nuxt-link';
Vue.component('nuxt-link', NuxtLink);
vue compatibility with other tools has workaround inactive question / support

Most helpful comment

Just as a workaround you may try something like this:

import {action} from '@storybook/addon-actions'
// import VueRouter  from 'vue-router' - not needed
// import NuxtLink from 'nuxt/lib/app/components/nuxt-link' - not needed

Vue.component('RouterLink', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<div @click="log()"><slot>RouterLink</slot></div>',
})

Vue.component('NuxtLink', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<div @click="log()"><slot>NuxtLink</slot></div>',
})

(action is used so that you can see a log in Storybook)

All 3 comments

Just as a workaround you may try something like this:

import {action} from '@storybook/addon-actions'
// import VueRouter  from 'vue-router' - not needed
// import NuxtLink from 'nuxt/lib/app/components/nuxt-link' - not needed

Vue.component('RouterLink', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<div @click="log()"><slot>RouterLink</slot></div>',
})

Vue.component('NuxtLink', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<div @click="log()"><slot>NuxtLink</slot></div>',
})

(action is used so that you can see a log in Storybook)

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Was this page helpful?
0 / 5 - 0 ratings