question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue version in template

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
Aaron-Poolcommented, Jan 18, 2020

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

0reactions
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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to show Vue.js app version in templates - Renat Galyamov
In this tutorial, you'll learn how to display your current app version in templates. It can be useful to know the app version...
Read more >
Template Syntax | Vue.js
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue...
Read more >
vue-template-compiler - npm
template compiler for Vue 2.0. Latest version: 2.7.14, last published: 2 months ago. Start using vue-template-compiler in your project by ...
Read more >
How do I fix a "Vue packages version mismatch" error on ...
This worked for me: Modify package.json : “vue”: “^2.0.8", “vue-template-compiler”: “^2.1.8". Delete node_modules. Run npm install.
Read more >
vue-template-compiler 2.6.12 vue packages version mismatch ...
You need to update vue, vue-server-renderer and vue-template-compiler in your project. @pumpknhd In your case you need to update vue with npm , ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found