How to compile Vuejs single file component?

Question

I am using Vuejs 2 (webpack-simple template) and I would like to know how can I 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
})

And these is the error that I've got when I start the server: __WEBPACK_IMPORTED_MODULE_0_vue___default.a.compile is not a function

I also tried this plugin vue-template-compiler with no luck. Can you please help me to make it work ? Thanks in advance.

@MahmudAdam I got this error : ...MyProject/node_modules/vue-template-compiler/package.json Unexpected token. You may need an appropriate loader to handle this file type. ... — Maria Minh
– Maria Minh, Commented Oct 17, 2016 at 16:28

Quoc-Anh Nguyen · Accepted Answer · 2016-10-19 04:28:33Z

4

You will need this setting in webpack's config:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue'
  }
}

despite on this problem: http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

answered Oct 19, 2016 at 4:28

Quoc-Anh Nguyen

5,0961 gold badge25 silver badges34 bronze badges

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

1 Comment

Maria Minh Over a year ago

Exactly it works, but compile function support only String as param. Thanks for your reply @imcvampire.

Collectives™ on Stack Overflow

How to compile Vuejs single file component?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related