Hello, I'm using Vue 2.0 standalone and i have a problem with components with Slot. Always render default value inside slot. Never render content inside custom component
package.json
{
"name": "web-components",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
"serve": "http-server -o -c 1 -a localhost",
"dev": "npm-run-all --parallel watchify serve",
"lint": "eslint --ext .js,.vue src test/unit",
"test": "karma start karma.conf.js",
"build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
},
"browserify": {
"transform": [
"vueify",
"babelify"
]
},
"aliasify": {
"aliases": {
"vue": "vue/dist/vue"
}
},
"dependencies": {
"vue": "^2.0.1"
},
"devDependencies": {
"aliasify": "^2.0.0",
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-runtime": "^6.0.0",
"babelify": "^7.2.0",
"browserify": "^13.1.0",
"browserify-hmr": "^0.3.1",
"cross-env": "^2.0.0",
"envify": "^3.4.1",
"eslint": "^3.3.0",
"eslint-config-standard": "^5.3.5",
"eslint-plugin-html": "^1.5.2",
"eslint-plugin-promise": "^2.0.1",
"eslint-plugin-standard": "^2.0.0",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-browserify": "^5.1.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-spec-reporter": "0.0.26",
"npm-run-all": "^2.3.0",
"phantomjs-prebuilt": "^2.1.3",
"proxyquireify": "^3.0.1",
"uglify-js": "^2.5.0",
"vueify": "^9.0.0",
"watchify": "^3.4.0"
}
}
main.js
//this show Failed to mount component: template or render function not defined.
//import Vue from 'vue/dist/vue'
import Vue from 'vue'
import Hello from './components/Hello.vue'
Vue.component('Hello',Hello)
new Vue({ // eslint-disable-line no-new
el: '#app'
});
Hello.vue
<template>
<div id="hello">
<h1>{{ msg }}</h1>
<slot>defect</slot>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>web-components</title>
<link rel="stylesheet" href="dist/build.css">
</head>
<body>
<div id="app">
<hello><label>change value</label></hello>
</div>
<script src="dist/build.js"></script>
</body>
</html>
Hello, I'm using Vue 2.0 standalone and i have a problem with components with Slot. Always render default value inside slot. Never render content inside custom component
package.json
{ "name": "web-components", "description": "A Vue.js project", "author": "", "private": true, "scripts": { "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", "serve": "http-server -o -c 1 -a localhost", "dev": "npm-run-all --parallel watchify serve", "lint": "eslint --ext .js,.vue src test/unit", "test": "karma start karma.conf.js", "build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js" }, "browserify": { "transform": [ "vueify", "babelify" ] }, "aliasify": { "aliases": { "vue": "vue/dist/vue" } }, "dependencies": { "vue": "^2.0.1" }, "devDependencies": { "aliasify": "^2.0.0", "babel-core": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "babel-runtime": "^6.0.0", "babelify": "^7.2.0", "browserify": "^13.1.0", "browserify-hmr": "^0.3.1", "cross-env": "^2.0.0", "envify": "^3.4.1", "eslint": "^3.3.0", "eslint-config-standard": "^5.3.5", "eslint-plugin-html": "^1.5.2", "eslint-plugin-promise": "^2.0.1", "eslint-plugin-standard": "^2.0.0", "http-server": "^0.9.0", "jasmine-core": "^2.4.1", "karma": "^1.2.0", "karma-browserify": "^5.1.0", "karma-jasmine": "^1.0.2", "karma-phantomjs-launcher": "^1.0.0", "karma-spec-reporter": "0.0.26", "npm-run-all": "^2.3.0", "phantomjs-prebuilt": "^2.1.3", "proxyquireify": "^3.0.1", "uglify-js": "^2.5.0", "vueify": "^9.0.0", "watchify": "^3.4.0" } }main.js
//this show Failed to mount component: template or render function not defined. //import Vue from 'vue/dist/vue' import Vue from 'vue' import Hello from './components/Hello.vue' Vue.component('Hello',Hello) new Vue({ // eslint-disable-line no-new el: '#app' });Hello.vue
index.html