Skip to content

[v1] v-slot shorhand # breaks page component compilation #1578

Open
@adamwathan

Description

@adamwathan
  • I confirm that this is an issue rather than a question.

Bug report

If you have a component that accepts a named slot and no default slot, VuePress errors when trying to use that component inside a Markdown file.

Version

1.0.0-alpha.47

Steps to reproduce

Create a component like this:

<!-- MyComponent.vue -->
<template>
  <div>
    <slot name="myslot"></slot>
  </div>
</template>

Then try to use it in Markdown:

# Hello world!

Lorem ipsum...

<my-component>
  <template #myslot>
    <p>Some content</p>
  </template>
</my-component>

You'll get an error in the browser that looks something like:

Errors compiling template:

tag <p> has no matching end tag.

You can work around this by adding some random HTML above the template tag:

# Hello world!

Lorem ipsum...

<my-component>
  <div>unused div that is never rendered but gets passed the error</div>
  <template #myslot>
    <p>Some content</p>
  </template>
</my-component>

This is mostly annoying in components that accept many slots where you'd like to name all of them because none of them really "deserve" to be the default slot.

Reproduction:

https://github.com/adamwathan/vuepress-slot-bug

What is expected?

It renders the component properly.

What is actually happening?

It errors.

Other relevant information

  • Your OS: macOS
  • Node.js version: 11.13.0
  • Browser version: Chrome 73
  • Is this a global or local install? Local
  • Which package manager did you use for the install? Yarn
  • Does this issue occur when all plugins are disabled? Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions