Trying to use this with Vue 2. #215
Comments
|
As the message suggests... read more here about the runtime only build. To solve it you need to either add the following to your Webpack config: resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}Or, make sure that all your components are defined in |
|
Awesome thanks Evan, i think it was a combination of my files actually having errors in them as i was trying to get them in a minimal state i forgot i didn't have |
|
This is a trap. I got in this trouble. so may you please improve the document ? add |
|
http://vuejs.org/guide/components.html#Local-Registration |
|
@netroby remove 'common' and you're good |
|
It appears for me that many-a-folks, having no idea, as to how to define a root component for runtime-only build, decide to use standalone. Which is not needed... As everything is compiled anyway. So have a solution. Runtime-only and easy-peasy. import Vue from 'vue'
import vmApp from './app.vue'
new Vue(vmApp).$mount('#app')@yyx990803 Probably worth mentioning a thing in docs? I'm somewhat active in chat and have seen a bunch of people using standalone "just because". |
In order to use ES6 with VueJS, Webpack has been installed as the build tool. Alias added to Webpack config for Vue -- see [this issue](vuejs-templates/webpack#215). Compiled ES5 file no longer tracked. In future, update config so that compiled script does not include Vue and instead load it from CDN.
In order to use ES6 with VueJS, Webpack has been installed as the build tool. Alias added to Webpack config for Vue -- see [this issue](vuejs-templates/webpack#215). Compiled ES5 file no longer tracked. In future, update config so that compiled script does not include Vue and instead load it from CDN.
In order to use ES6 with VueJS, Webpack has been installed as the build tool. Alias added to Webpack config for Vue -- see [this issue](vuejs-templates/webpack#215). Compiled ES5 file no longer tracked. In future, update config so that compiled script does not include Vue and instead load it from CDN.
In order to use ES6 with VueJS, Webpack has been installed as the build tool. Alias added to Webpack config for Vue -- see [this issue](vuejs-templates/webpack#215). Compiled ES5 file no longer tracked. In future, update config so that compiled script does not include Vue and instead load it from CDN.
|
@asvae could you provide an example of what's inside |
|
I thought there should be a lint tools. like vue-lint or some thing. just check the grammar of app.vue and all other vue files |
|
@tsankuanglee, sure. It's just a single file component. Or do you want to see the router config and stuff like that? |
|
@tsankuanglee Here is a snippet. // app.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './components/App.vue';
import Home from './components/Home.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [{
path: '/',
name: 'home',
component: Home
},
// .. others
});
const app = new Vue({
router,
render: createEle => createEle(App)
}).$mount('#app-container');// App.vue
<template>
<div id="app">
<p>
<router-link to="/foo">Foo</router-link>
<router-link to="/foo2">Foo 2</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
// empty
}
</script><!-- index.html -->
<div id="app-container"></div>The browserify example helped me. |
|
Memo for manually switch
// src/main.js
...
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})// build/webpack.base.conf.js
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
...
// src/main.js
...
new Vue({
el: '#app',
router,
render: h => h(App)
})// build/webpack.base.conf.js
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
}
},
... |
|
I'm pretty lost as to what the actual problem is here, but @thovt93's solution worked for me. I originally had |
|
I can understand. At first glance, it does not make much sense. However, if you take your time and read the link Evan You posted, it should make much more sense. Essentially, Vue.js ships with two builds:
The compiler takes care of converting template strings to render functions. If you're getting this error, it means that you're trying to use the runtime only build while having one or more string templates in your project. If you don't have a compilation step (such as webpack w/ vue-loader) and wish to use string templates, just However, if you do have a compilation step, you might benefit from converting all your string templates to render functions to remove the compiler overhead while using your Vue.js app. This can be done with webpack + vue-loader + only using Single File Components. You will still be able to use templates, they'll just be converted in the compilation step. If you're unsure on how to render the root Vue.js instance without a string template, this might give you an idea: // index.js
import Vue from 'vue';
import App from './App.vue';
const app = new Vue({
el: '#app',
render: function (h) {
return h(App);
}
});// App.vue
<template>
<div id="app">
<p>Does this work?</p>
<p>{{text}}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
text: 'Yes it does!'
}
}
}
</script><!--index.html-->
<html>
<head></head>
<body>
<div id="app"></div>
<script src="./app.bundle.js"></script>
</body>
</html> |
|
I figured out the source of my confusion -- my project does only have single-file VueJS components, but I am using P.S. I had of course already read that link in detail! |
|
@youfoundKim method you propose with render function for root components always gives me an error: I have no idea why ==== Found an issue, I changed router setup (router list in one file, |
|
We've now completely removed which isn't using string templates (it's defined in a |
|
For those without webpack ( babel only ) and using vue-cli use the runtimeCompiler option. https://cli.vuejs.org/config/#runtimecompiler Create a |
This fixed it for me (I'm working with Onsen) . Thanks a lot |
|
What if |
|
@nsjames it solves the problem on |
|
@laurensiusadi hmm not sure. It should do both. |
|
Uncaught Error: Module build failed: SyntaxError: Unexpected token (10:24) |
|
怎么解决 |
|
@nicaisa 發送配置 |
thanks @nsjames ,it works for me. |
|
verbose node v10.13.0 |
|
这个呢 |
|
需要文件 |
|
my god even init is shitty |
|
does not even create webpack.config.json. Should we create this explicitly? |
|
It happened to me because I included at webpack.config.js some new alias without keeping the ones that Encore added. So I fixed merging the new with the ones that Encore builds with Lodash: |
|
What is the difference... in package.json in webpack.config.js Both produces identical build. Which one is good practice? Nobody mentioned here but for bundlers like browserify or webpack should be used |
|
I had this issue once again during migrating to vue + typescript, the thing is during template-loader it was removing id="app" or could not mount it due to css modules did not work. |
|
Now the "runtimerCompiler" has been updated to "runtimeCompiler" |
and others
So i bumped Vue to beta 7 and vue-loader to
9.3.2but i keep getting this warning and nothing is rendering[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.My small example is:
I've also tried:
To no avail, it's doing my head in, i'm sure it's a simple fix :(
The text was updated successfully, but these errors were encountered: