plugin doesn't work in Vue CLI v4.2.2

[Dhruuva]

Hi ! I have create vue create my-vue

I just try that step in your manual: Either add the plugin from the vue ui interface, or run the following in your Vue-cli 3 project: vue add pug

After I update template in app.vue to pug template #app img(alt='Vue logo', src='./assets/logo.png') helloworld(msg='Welcome to Your Vue.js App')

And in browser i see this error

Failed to mount component: template or render function not defined.

Could You please fix it ? Best Regards.

[Ge-yuan-jun]

you may update vue-cli to V4.5.9,then it works.

[Ge-yuan-jun]

But maybe I find an error ?

I can run correctly

<template lang="pug">
img(alt="Vue logo", src="./assets/logo.png")
HelloWorld(msg="Welcome to Your Vue.js + TypeScript App")
</template>

But,when I change my indent like this:

<template lang="pug">
  img(alt="Vue logo", src="./assets/logo.png")
  HelloWorld(msg="Welcome to Your Vue.js + TypeScript App")
</template>

I find that the first line must be 0 indent.

should I change some config?

[michaelalhilly]

Hi @Dhruuva and @Ge-yuan-jun. Vue components can only have 1 root element. So to render your example you would have to do this:

<template lang="pug">
  div
    img(alt="Vue logo", src="./assets/logo.png")
    HelloWorld(msg="Welcome to Your Vue.js + TypeScript App")
</template>

[Ge-yuan-jun]

@michaelalhilly Hello, the demo I provided uses vue 3.0, so, it can render more than 1 root element

[michaelalhilly]

@Ge-yuan-jun My fault. Yes Vue 3 can have multiple root elements.