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.

v-slot compilation fails

See original GitHub issue

Does vue-jest support v-slot directive?

I use 4.0.0-beta.2 version of vue-jest and compilation of SFC with pug templates fails if there is v-slot directive.

For example, a template

<template lang="pug">
v-expansion-panel-content
    template(v-slot:header)
      div {{name}}

ends up with

Details:

SyntaxError: Unexpected token (1:123)
1 : var __render__ = function () {with(this){return _c('v-expansion-panel-content',{scopedSlots:_u([{key:"header",fn:function(v-slot:header){return [_c('div',[_v(_s(name))])]}}])})}}
                                                                                                                                   ^

      at Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2610:13)

When I rewrite my template with the old syntax

<template lang="pug">
  v-expansion-panel-content
    template(slot="header")
      div {{name}}

then compilation works fine

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

42reactions
aantipovcommented, Apr 3, 2019

@LinusBorg Cool, it works! Thank you a lot for the prompt response!

I was already going to rewrite my pug templates to html ones. You saved my life 😃

You were totally right, it’s because of how pug treats boolean attributes https://pugjs.org/language/attributes.html#boolean-attributes

Setting pug’s doctype option to "html" solves the problem

  globals: {
    'vue-jest': {
      pug: {
        doctype: 'html',
      },
    },
  },
28reactions
LinusBorgcommented, Apr 3, 2019

try this: template(v-slot:header="")

I suspect pug passes v-slot:header="v-slot:header" when the attribute value isn’t specified or something?

Read more comments on GitHub >

github_iconTop Results From Across the Web

'v-slot' directive doesn't support any modifier - Stack Overflow
I don't see any v-slot in the code you provided so I can show you only my usecase. With Eslint error: <template v-slot:item.actions="{...
Read more >
v-slot directive should be used properly - Rule | DeepScan
In this case, Vue throws a compile error because the old-style attributes will be deprecated. See Example 3 below. <template v-slot> is used...
Read more >
Slots - Vue.js
Attempting to place the v-slot directive directly on the component will result in a compilation error. This is to avoid any ambiguity about...
Read more >
DataGrid - How to use a cell template in a custom component ...
I have tried to define a named slot but I have a compilation error "<template v-slot> can only appear at the root level...
Read more >
Laracasts Forum
Template compilation error: Tags with side ef ... Template <Disclosure as="div" v-for="faq in faqs" :key="faq.question" class="pt-6" v-slot=.
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