Using Vue (^2.0.0-rc.6) + Browserify, entry point is index.js:
import Vue from 'vue'
import App from './containers/App.vue'
new Vue({ // eslint-disable-line no-new
el: '#root',
render: (h) => h(App)
})
App.vue:
<template>
<div id="root">
<hello></hello>
</div>
</template>
<script>
import Hello from '../components/Hello.vue'
export default {
components: {
Hello
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
Hello.vue:
<template>
<div class="hello">
<h1>\{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}
</script>
Blank white screen, did I miss something?
EDIT:
The entry html is just <div id="root"></div>, no errors on console logs, and I'm pretty sure Hello.vue is loaded since console.log('test') that file appears on console.
EDIT 2:
Found the error:
[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. (found in
anonymous component - use the "name" option for better debugging
messages.)
Does this mean I have to use webpack solution? Cannot use standard HTML?
SOLUTION:
Import Vue from 'vue/dist/vue.js'
Just to make life easier for folks looking for the answer:
import Vue from 'vue/dist/vue.js'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
From the author -- 2.0 standalone build means (compiler + runtime). The default export of the NPM package will be runtime only, because if installing from NPM, you will likely pre-compile the templates with a build tool.
If you are using a build tool like browserify or Webpack, you can most probably use single file components to avoid such errors (in single file components the templates are automatically compiled to render functions by vueify). You definitely should try to avoid templates anywhere else. Check the forum and documentation for answers about how to avoid them.
But I know from my own experience that it is not always easy to find the templates in your project, that are causing the error message. If you are having the same problem, as a temporary workaround, the following should help:
You should not import 'vue/dist/vue.js' (check the documentation: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds why not)
Instead you should handle that in the build tool you are using.
In my case, I'm using browserify where you can use aliasify for creating the alias. Add the following to your package.json file:
{
// ...
"browser": {
"vue": "vue/dist/vue.common.js"
}
}
for Webpack users it seems you have to add the following to your config:
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
More information can be found in the documentation: https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
For Vue 3.4.0 You can add a new file at the root directory of the project named
vue.config.js and add the following into it.
module.exports = {
runtimeCompiler: true
}
Next time when you start the app you can see
Compiled successfully in 204ms
20:46:46
App running at:
With Brunch I resolved this by adding this rule in brunch-config.js:
npm: {
aliases: {
vue: "vue/dist/vue.js"
}
}
see http://brunch.io/docs/config#npm
It was to build a Vue component with an inner <template>:
<template>
<div> hello </div>
</template>
<script>
export default {
name: 'Hello',
props: {
title: String,
},
}
</script>
Related
I have been using vue in a proyect recently and when im trying to compile my brwoser page is white and the error You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. is on the browser console
I have this structure in my index.html file
<body id="page">
<div id="app">
<h1>{{Title}}</h1>
<input type="text" placeholder="Username" id="input" v-model="username"/>
<div>
<button id="button" v-on:click="play">Play</button>
</div>
<h1>{{Records}}</h1>
<dl id="list">
<dt v-for="user of users" id="data">
{{user.Username}} - {{user.Score}}
</dt>
</dl>
</div>
<script src="Views/welcomePage.js"></script>
</body>
And here is where i am importing vue, my welcomePage.js file, and i need to import exactly 'vue' because i need to export the data that will be on the username variable once you write the data on the input in the html file so i cant change the import to 'vue/dist/vue.js'
window.axios = require('axios');
import Vue from 'vue';
var app = new Vue({
el: '#app',
data:{
Records: 'Records',
Title: 'Snake',
users:[],
username: '',
},
mounted: function(){
axios.get('http://localhost:3000')
.then(res => this.users = res.data);
},
methods:{
play(){
console.log(app)
window.location.href = 'snake.html'
}
}
})
export default app.$data.username
How can I see my page well?
Hopefully a pretty easy one - you are using a flavor of vue.runtime.js instead of the regular vue.js.
You can see an explanation of the different builds in the docs.
The runtime-only build is a bit smaller, but is really meant for different use cases, like when running from Vue CLI and npm run (a very popular way to use Vue) or if you're calling html-rendering functions natively from JavaScript (not popular).
You need the "full" build, or "full (production)" build, each of which have the template compiler built in. It's probably linked from your HTML page, so just change your reference the the appropriate vue.js file.
I have a project that is built in Vue and I want to reuse the components from the Vue application in an Angular application so I don't have to go and rebuild every single component from scratch.
I saw this tutorial on medium: How to use Vue 2.0 components in an angular application, but that tutorial is for AngularJS.
I'm wondering if anyone has done this before, if it's worth it and if anyone knows of any tutorials or reference material.
Wrap your Vue components as native Web Components.
Since Angular supports using custom Web Components, you'll be able to use the Vue components (wrapped as Web Components).
To Angular it doesn't make a difference if the custom Web Components were generated by Vue or not (for all Angular knows, they could be native HTML elements).
Demo
Runnable DEMO here.
The demo is an Angular 5 app. The Vue custom component is defined in index.html. Notice how in app/app.component.html it is used directly in the template, as if it were a native element.
Step by step below.
In Vue
Use vue-custom-element to wrap your Vue components as Web Components:
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-custom-element#3.0.0/dist/vue-custom-element.js"></script>
<script>
const MyVueWebComp = {
props: ['msg'],
template:`
<div style="border: 3px dashed green; padding: 5px">
I am my-vue-web-comp.<br>
Value of "msg" prop: {{ msg }}<br>
<input v-model="text"><button #click="addText">Click me</button>
<div v-for="t in texts">
Text: {{ t }}
</div>
</div>
`,
data() {
return {
text: '',
texts: []
};
},
methods: {
addText() {
this.texts.push(this.text);
this.text = '';
}
}
};
Vue.customElement('my-vue-web-comp', MyVueWebComp);
</script>
That will create a <my-vue-web-comp> web component that can be used directly in the DOM, without the need to have a working Vue instance.
The above is just a demo runnable directly in the browser. If you have .vue files and a vue-cli app, you'll need to do npm install vue-custom-element --save and then create a .js file like:
import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import MyElement from './MyElement.vue';
Vue.use(vueCustomElement);
Vue.customElement('my-element', MyElement);
And then this, when bundled, will generate a .js file that can be imported directly as a single <script> tag, instead of the whole code and script tags above.
For more details, check vue-custom-element's docs.
In Angular
Now, in the Angular app, after importing the Web Components (being them Vue-generated or not), configure them to be used by Angular by adding schemas: [CUSTOM_ELEMENTS_SCHEMA] in your #NgModule:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
//...
#NgModule({
// ...
schemas: [
CUSTOM_ELEMENTS_SCHEMA // added this
]
})
export class AppModule {
Now use the Web Components (generated from Vue or not) directly in Angular templates. E.g. the component defined in the code above could be used like:
<my-vue-web-comp [msg]="name"></my-vue-web-comp>
In fact, the runnable demo shows an example of that usage.
Limitations
You may need polyfills for older browser support. Please check vue-custom-element's docs for more details.
My folder structure is this:
./package.json
src/Notification.js
test/notification.js
File Notification.js
export default {
template: '<div>{{message}}</div>',
data() {
return {
message: 'Hello world'
};
}
};
File notification.js
import Vue from 'vue';
import test from 'ava';
import Notification from '../src/Notification';
test('that it renders a notification', t => {
new Vue(Notification).$mount();
});
Error when i run: node_modules/.bin/ava
[Vue warn]: You are using the runtime-only build of Vue where the
template compiler is not available. Either pre-compile the templates
into render functions, or use the compiler-incluided build. (found in
<Root>)
1failed
that it renders a notification
test finished without running any assertions
If someone can say me what's wrong and explain the code, i will really appreciate it.
Your test did not use any assertions. You probably want to assert something on the new Vue(Notification).$mount() return value. If you're just making sure it doesn't throw an exception you could do t.notThrows(() => new Vue(Notification).$mount()).
Vue ships with several versions, some with the template compiler and some without. The way you are importing Vue now, the template compiler is not included, so Vue cannot compile
template: '<div>{{message}}</div>',
Try instead importing a version of Vue with the compiler.
import Vue from "vue/dist/vue"
I've been working on porting a vue.js component from vue 1.0 to Vue 2.0 using Vueify. In the Starter resources it states:
When you use vue-loader or vueify to import *.vue files, their parts are automatically compiled into render functions. It is therefore recommended to use the runtime-only build with *.vue files.
However, this does not appear to be the case. If I have a simple component like:
<template>
<div>
{{ msg }}
</div>
</template>
<script type="text/javascript">
export default {
props: {
msg: {
default: "Child Message"
}
}
}
</script>
And in my main.js file I do:
import Vue from 'vue'
import MyComponent from './my-component.vue';
Vue.component('my-component', MyComponent);
new Vue({
el: '#app',
render: function(createElement) {
return createElement(MyComponent)
}
});
Then compile with Gulp using:
browserify('./main.js')
.transform(vueify)
.bundle()
.pipe(fs.createWriteStream("bundle.js"))
I cannot do anything at all with the component except get it to render. In fact, it will actually render the component as soon as it finds the div with the id "app":
<div id="app">
<!-- my-component renders even though I didn't ask it to -->
</div>
And any props added to the component are not received, so:
<div id="app">
<!--
Message displays as default "Child Message" rather than "Parent Message". The prop wasn't passed
-->
<my-component msg="Parent Message"></my-component>
</div>
Similarly, if I add data to main.js, it's not accessible from the web page:
import Vue from 'vue'
import MyComponent from './my-component.vue';
Vue.component('my-component', MyComponent);
new Vue({
el: '#app',
render: function(createElement) {
return createElement(MyComponent)
},
data() {
return {
msg: "Parent Message"
}
}
});
in HTML:
<div id="app">
{{ msg }} // This will not print
</div>
And anything inside "#app" doesn't render at all (remember "my-component" is rendered even if I don't add it):
<div id="app">
<!-- This doesn't render-->
<strong>A component </strong>
<my-component></my-component>
</div>
So it looks to me like you can render a component, without any control over it, and you cant do anything further with the view model, so is it really the case that I should be using the runtime-only build as suggested?
In the end I've used the standalone build using aliasify and everything works fine, but I'd really like to know what it is I am missing when using vueify with the runtime build. Surely the behavior I'm describing isn't what is supposed to happen, so I can only assume I have misunderstood something somewhere.
Doing some tests the problem is in your default render function:
render: function(createElement) {
return createElement(MyComponent)
}
It's overriding the main Vue file's render function and creating a base MyComponent inserting it into the body.
When I removed the render function the prop fired.
jsFiddle Try that, just uncomment the render function to see what I mean.
The render function is meant to replace html templating by allowing you to have more control and utilize other template options.
I'm having trouble getting vue-resource working within .vue components in 2.0RC. It was working fine in 1.x but now the $http method appears to be missing when accessing this from within a component method.
I am using webpack and my app.es6 file looks like:
import Vue from 'vue/dist/vue.js'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Login from './Login.vue'
Vue.use(VueResource);
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/login', component: Login }
]
})
const App = new Vue({
router: router,
el: "#vue-app",
template: '<div><router-view></router-view></div>',
created: function(){
console.log('data this: ', this.$http()) //this $http.get() works
}
})
My Login.vue looks like:
<template>
<div>
<h2>Log In</h2>
<button class="btn btn-primary" #click="submit()">Access</button>
</div>
</template>
<script type="text/ecmascript-6">
export default {
methods: {
submit: function () {
console.log('Login this.$http()', this.$http.get) //this $http.get() does not work
}
}
}
</script>
Some theories are:
2.0 broke things somehow but the vue-resource docs haven't been updated yet.
It has something to do with changing from Vue.extend(...) and Vue.start(...) in version 1 to the new Vue() syntax I'm using now.
I need to do something differently using the new vue-router syntax.
Thanks for any help.
I got an answer over on the Vue Help forum. The issue arose because I was using the standalone version of Vue but not fully aliasing it in Webpack, so Webpack was loading two different versions.
User LinusBorg answered:
You require the standalone build, but webpack is also loading the
runtime-only build, so you end up with two versions of Vue in your
project - one has vue-resource, the other doesn't.
If you want to keep the standalone build, you have to add an alias to
your webpack config: vue: 'vue/dist/vue'
Just in case anyone else has this problem and is as generally bewildered by webpack as I am, to be slightly more explicit:
Webpack was loading two different versions of vue.js, one from my in-file import statements, one from the webpack *.vue module loaders. The exact way I fixed it was to add the following to my webpack-config.js:
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
Within my app.es6 file I also had to change back the import Vue from 'vue/dist/vue.js' to import Vue from 'vue'.