Vue 3 with Vite rendering blank page when not using App.vue

Question

Setup

I've initialized a new project using vite on an Arch based operating system.

When I try to create the simple counter from the vue docs, the elemet doesn't render.

Code

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="counter">
      Counter: {{ counter }}
    </div>
    
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js

import { createApp } from 'vue'

var CounterApp = {
    data() {
      return {
        counter: 0
      }
    },
    mounted() {
      setInterval(() => {
        this.counter++
      }, 1000)
    }
  }
  
  
createApp(CounterApp).mount('#counter')

When I inspect the element it is commented out:

Question

Why is that? And how to resolve the error?

schettino72 · Accepted Answer · 2021-05-02 09:11:51Z

15

By default the runtime compiler is not included in the Vue build. To include it, add the following resolve.alias configuration:

vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
      alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
      },
    },
})

Docs https://vitejs.dev/config/#resolve-alias

answered May 2, 2021 at 9:11

schettino72

3,2201 gold badge31 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

Note that this increases the size of the app by ~30%. You're not wrong about how it's done, but it would be better to simply use the recommended mounting code unless there is some special reason to use the runtime compiler.

Dan · Accepted Answer · 2021-03-04 15:04:25Z

Doing that replaces the normal mounting process, and treats the root element like a template string for the App component. Since template strings require the runtime compiler, you would need to use a full build. There should be a console warning about that.

To avoid increasing the size of your app (by ~30%) with the full build, it's recommended to leave the mounting point untouched, and give the App component its own proper template:

index.html

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue

<template>
  <div id="counter">
    Counter: {{ counter }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
</script>

Collectives™ on Stack Overflow

Vue 3 with Vite rendering blank page when not using App.vue

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related