Vue.compile is not a function

[melbayad]

I am using Vuejs 2 (webpack-simple template) and I would compile template before render it. Below my code :
App.vue

<template>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
</template>
<script>
    export default {
        name: 'app'
    }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

const res = Vue.compile(App)
const vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    },
    render: res.render,
    staticRenderFns: res.staticRenderFns
})

But when I start the server I got this error : __WEBPACK_IMPORTED_MODULE_0_vue___default.a.compile is not a function . Can you please help me to make it work ?

[LinusBorg]

import Vue from 'vue'imports the runtime-only build, which does not have the compiler.

https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

I will adjust the template to include the standalone build version by default.

[LinusBorg]

Done. vuejs-templates/webpack-simple@de7d7d7

[melbayad]

@LinusBorg Thanks for your reply. As mentioned above, I added the vue$ alias to my webpack config but It didn't resolve the problem. I got another error : template.trim is not a function (in vue.js, line : 7023)

[LinusBorg]

Oh. Now this is a different problem, and a mistake on your part which I didn't catch before:

• Vue.compile() expects a template string
• you pass the App to it
• but App is an object of component options (which you defined in the <script> tag of the App.vue file), and its template has already been compiled into a render function by vue-loader

[melbayad]

Ok... @LinusBorg, I get your point. So, The main goals for me :

• Separate component content to main.js to keep code clean.
• I don't want to have html content in script tag

So, If I keep just the content inside the <template> tag in my 'App' component, is there any way to get its content as String in main.js ?

[LinusBorg]

So, If I keep just the content inside the <template> tag in my 'App' component, is there any way to get its content as String in main.js ?

No. The whole point of vue files is to keep everything in one place. Why do you want an App.vue component if you only want the template string?

I don't really understand what you are trying to do, or why, despite your explanation. Sorry :(

Maybe save it as .html and install html-loader to do template: require('html!./main.html')

[melbayad]

OK. It's clear now. Thanks a lot @LinusBorg for your detailed explanation.