Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue version in template #9520

Closed
rijkvanzanten opened this issue Jan 17, 2020 · 5 comments
Closed

Vue version in template #9520

rijkvanzanten opened this issue Jan 17, 2020 · 5 comments

Comments

@rijkvanzanten
Copy link

Describe the bug
While writing a story, I noticed that Storybook's template string doesn't play nicely with Vue's scoped slot syntax. This indicates to me that the Vue version that's used to render the template string is < 2.6.

To Reproduce
Steps to reproduce the behavior:

  1. Create a .stories.js file that renders a Vue component as follows:
export default {
  title: 'MyButton'
};

export withText = () => ({
  template: '<v-button><v-icon #icon /></v-button>'
});
  1. Note how
    '<v-button><v-icon #icon /></v-button>' does not work as expected, while
    '<v-button><v-icon slot="icon" /></v-button>' does.

Expected behavior
I expected Storybook to render this template with the Vue version that's installed in node_modules. Which in my case is 2.6.11 (according to yarn list).

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System:

Environment Info:

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
  Binaries:
    Node: 12.13.0 - ~/n/bin/node
    Yarn: 1.21.1 - ~/n/bin/yarn
    npm: 6.13.6 - ~/n/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 70.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.3.3 => 5.3.6 
    @storybook/addon-centered: ^5.3.6 => 5.3.6 
    @storybook/addon-knobs: ^5.3.6 => 5.3.6 
    @storybook/addon-links: ^5.3.3 => 5.3.6 
    @storybook/addon-notes: ^5.3.6 => 5.3.6 
    @storybook/addons: ^5.3.3 => 5.3.6 
    @storybook/vue: ^5.3.3 => 5.3.6 

Additional context
What is this template string rendered with? How can I upgrade the Vue version in use here? The slot="" syntax will be deprecated in Vue 3, so I'd like to keep my stories / components as "future proof" as possible.

@shilman
Copy link
Member

shilman commented Jan 17, 2020

@pksunkara @Aaron-Pool @pocka any thoughts?

@pksunkara
Copy link
Member

Additional context, Latest @storybook/vue devDependencies has

  'babel-preset-vue': '^2.0.2',
  vue: '^2.6.8',
  'vue-loader': '^15.7.0',
  'vue-template-compiler': '^2.6.8'

@Aaron-Pool
Copy link
Contributor

@rijkvanzanten Any public code that I can easily pull down and debug?

@stale
Copy link

stale bot commented Feb 8, 2020

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!

@stale stale bot added the inactive label Feb 8, 2020
@stale
Copy link

stale bot commented Mar 9, 2020

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants