Is there anyway to write templates with pug language? npm i pug pug-plain-loader didn't worked for myself.

I tried to add the parameter: preprocessLang: template.lang, to SFC compileTemplate and the pug is working. Wait for @yyx990803 to support this feature. 😋

https://github.com/vuejs/vite/blob/1b0b4ba340b5d552abd7fa0457f9b2de55fc1647/src/node/serverPluginVue.ts#L208-L217

@zzetao PR welcome!

Hmm not working for me with npm i pug pug-plain-loader

<template lang="pug">
  div test
</template>

[vite] SFC template compilation error: 

  TypeError: Cannot read property 'start' of undefined
      at C:\Users\<redacted>\node_modules\vite\dist\server\serverPluginVue.js:241:78
      at Array.forEach (<anonymous>)
      at compileSFCTemplate (C:\Users\<redacted>\node_modules\vite\dist\server\serverPluginVue.js:236
:16)
      at C:\Users\<redacted>\node_modules\vite\dist\server\serverPluginVue.js:63:24
      at processTicksAndRejections (internal/process/task_queues.js:97:5)

1. pug doesn't allow leading whitespace because it's indentation-based
2. Vue 3 SFC doesn't de-indent <template> content
3. There's a bug when reporting the error

The following should work

<template lang="pug">
div test
</template>

Also, you don't need pug-plain-loader, just pug is enough

Not a big deal I believe but I'm sure in Vue 2 you were able to use Pug with leading whitespace(s). Is the difference between them coming from pug-plain-loader?

This is a behavior change in Vue 3's SFC compiler. Preserving the raw indent avoids the extra cost of de-indenting which can be costly when source map is enabled.

pug-plain-loader is only for webpack and is not needed when using Vite.

Small bug: div(v-else) fails during vite build, div(v-else-if='true') works.

Small bug: div(v-else) fails during vite build, div(v-else-if='true') works.

You can use div(v-else='') instead else-if right now. However div(v-else) is not work currently (except the statements are on root indentation)

And I think the problem is not about vite, it's about @vue/compiler-sfc instead. Maybe @yyx990803 should clarify.

For those who come here via Google,

As of vite v1.0.0-beta.11, run npm install pug --save-dev and that should be enough. Make sure the root element in each SFC is unindented though.

does it effect performance and/or bundle size on production build?

In theory, it shouldn't. But I imagine sourcemaps might be affected.

With a fresh yarn create vite-app my-app cd my-app yarn add pug yarn dev I get the following

[vite] Dep optimization failed with error:  
Could not load path (imported by node_modules/pug/lib/index.js): ENOENT: no such file or directory, open 'path'

With a fresh yarn create vite-app my-app cd my-app yarn add pug yarn dev I get the following

[vite] Dep optimization failed with error:  
Could not load path (imported by node_modules/pug/lib/index.js): ENOENT: no such file or directory, open 'path'

Same here:

[vite] Dep optimization failed with error:
Could not load path (imported by node_modules\pug\lib\index.js): ENOENT: no such file or directory, open '<project path>\path'
[Error: Could not load path (imported by node_modules\pug\lib\index.js): ENOENT: no such file or directory, open '<project path>\path'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: '<project path>\\path', // this of course does not exist
  watchFiles: [
    // ...watched files...
  ]
}

EDIT:

Actually, this was resolved by uninstalling pug and reinstalling it with the --save-dev flag for me.

@seanaye if its still an issue for you, give that a shot.