Skip to content

Suggested docomentation addition for use with webpack/vue-loader #2

@tminich

Description

@tminich

In default mode vue-template-compiler in most cases creates white-space text nodes in place of the template which leads to WrappedComponent unnecessarily rendering the 'plain' wrapper when wrap=false.

I found two ways to work around this:

  1. Use the full template syntax after the default slot content (see details below).
  2. Set whitespace: 'condense' in vue-template-compiler Options

I think this should be at least mentioned in the docs =)

Details for 1.:

Working

<template>
  <div>
    <WrappedComponent>
      <component-inner/>
      <template #wrapper>
        <component-wrapper/>
      </template>
    </WrappedComponent>
  </div>
</template>

Not working (aka causes extra text node)

<template>
  <div>
    <WrappedComponent>
      <template #wrapper>
        <component-wrapper/>
      </template>
      <component-inner/>
    </WrappedComponent>
  </div>
</template>
<template>
  <div>
    <WrappedComponent>
      <component-wrapper #wrapper/>
      <component-inner/>
    </WrappedComponent>
  </div>
</template>
<template>
  <div>
    <WrappedComponent>
      <component-inner/>
      <component-wrapper #wrapper/>
    </WrappedComponent>
  </div>
</template>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions