CODEWITHSUNDEEP
javascriptvue.js
artolini
artolini

Reputation: 107

Vue used with Webpack removes app root from DOM

This question is related to run vue with webpack
I would be grateful for answer why I can't simply initialize Vue & Webpack app by creating:
index.js

import Vue from 'vue';

let app = new Vue({
  el: '#app',
  data: {
    message: 'message'
  }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Playground</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
</body>
</html>

Here's my webpack config file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html'
  })]
};

In this way, root (#app) is simply removed from HTML file by Vue. I'm new to Vue, and will be glad for explanation. I have a learning manner, that before learning complex solutions like @vue/cli I wish to analyze dependencies of it.

Should I work only with vue-loader? As far as I know, it's used to parse .vue files, but I don't need one here.

Thank You in advance.

Upvotes: 0

Views: 131

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37803

By default, when used with Webpack, the runtime only build of Vue is used. If you want to have in-DOM template (your case where Vue template is included directly inside HTML file) or string templates (template component option), those are compiled at runtime (when the page is loaded into browser) and that requires Vue build which includes compiler.

Take a look to the docs on how to configure Webpack to use compiler build of Vue - Runtime + Compiler vs. Runtime-only

Upvotes: 2

Related Questions