Vue 2.0 Problem with Slot #3965

eugenio4 · 2016-10-17T22:07:17Z

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>

LinusBorg · 2016-10-17T22:30:30Z

There's a bug in the browserify template that I just today submitted a PR for, and I assume it's the reason for your problem.

It will likely be fixed tomorrow.

Meanwhile, the fix for you is easy - your package.json should look like this:

// ...
"browserify": {
    "transform": [
      "babelify",
      "aliasify",
      "vueify"
    ]
  },
  "aliasify": {
    "aliases": {
      "vue$": "vue/dist/vue"
    }
  },
 //...

Then you can use the original import line that you have commented out.

eugenio4 · 2016-10-17T23:13:24Z

Hello , I tried to change the package.json but when i use import Vue from 'vue' i have a error

Failed to mount component: template or render function not defined. (found in root instance)

When use import Vue from 'vue/dist/vue' no render content inside slot

LinusBorg · 2016-10-18T10:36:46Z

please provide a live reproduction (repository) or ask on the forums for help.

forum , Stack Overflow or on gitter

eugenio4 · 2016-10-18T12:46:34Z

here repository with the problem

https://github.com/eugenio4/vue-slot

eugenio4 · 2016-10-18T14:16:22Z

If i use npm run build instead of nrpm run dev. This work fine.

defcc · 2016-10-22T14:00:51Z

Got it, @eugenio4。 I'll take a look at this issue, @LinusBorg

HerringtonDarkholme · 2016-10-26T15:17:50Z

Please just don't mix runtime only build with standalone build. They are incompatible. My suggestion after digging to the build.js

From the comment here

FYI: You should use standalone build to use html template. To adapt runtime build, use render option instead of writing html.

new Vue({
  el: '#app',
  render: h => h('hello'),
})

For more info, please see https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds

If you need more complex entry point template, just write an entry component. And render it in render function.

More Info:

The problem is vue-hot-load api in vueify uses runtime build, and user code uses standalone build. These two builds both mount the same component and are agnostic about each other. The slots children are lost between two conflicting builds.

defcc · 2016-10-26T17:41:10Z

As @HerringtonDarkholme metioned, there are two vue versions in your app indeed, standalone and runtime version when you run npm run dev

Standalone required from your app.js is used to compile the template in the html, it is resolved to "vue/dist/vue.js" . And in internal there is a runtime version used by vueify to compile your .vue files and hot-reload, it is resolved to "vue/dist/vue.common.js" and bundled to the compiled js files too.

It fails when doing some prototype checks in runtime (one from vue.js and the other from vue.common.js), so you just get the default slot node.

As for npm run build , NODE_ENV is set to production when you run it, so the hot-reload logic is eliminated and it works.

As for your issue, you could just select "Runtime-only" version when init your app with vue-cli, and move all your codes into .vue files.

I'll make a PR to update the related docs to specifiy this problem.

Maybe the best way is that we could ensure the only one vue version in the browserify template. I am looking into it.

LinusBorg · 2016-10-26T19:06:02Z

This problem is explained on the "installation" page of the guide. But maybe it can be improved / also mentioned in the migration guide?

defcc · 2016-10-27T00:33:35Z

@LinusBorg I think so. We should also upgrade the browserify template. I'll try to do it.

LinusBorg · 2016-10-27T08:10:40Z

Browserify template is also updated, it uses aliasify if standalone was selected.

defcc · 2016-10-28T06:24:41Z

@LinusBorg it seems not working as expected, because .vue files are not processed duiring the aliasify transformation. I open a PR here benbria/browserify-transform-tools#26 to add .vue file to its JS_EXTENSIONS. Once it's merged, I will update the template as well.

defcc · 2016-10-29T01:15:00Z

@eugenio4 ，this is an issue of browserify template, and I have submited a PR to fix it.

I forked your repo and updated it here https://github.com/defcc/vue-slot/blob/master/package.json

You could adjust your package.json like this.

"browserify": {
  "transform": [  
    "babelify",   
    "vueify"   
  ]  
},
"browser": {
   "vue": "vue/dist/vue" 
}

defcc · 2016-10-29T05:42:24Z

PR merged, I'll close this issue. If your problem still exists, you could report an issue here https://github.com/vuejs-templates/browserify/issues

LinusBorg closed this as completed Oct 17, 2016

LinusBorg reopened this Oct 17, 2016

LinusBorg added need repro 2.0 labels Oct 18, 2016

defcc removed the need repro label Oct 22, 2016

defcc self-assigned this Oct 23, 2016

This was referenced Oct 28, 2016

it dosen't work when selected standalone version vuejs-templates/browserify#26

Closed

standalone version breaks due to some bug of aliasify (fix #26) vuejs-templates/browserify#27

Merged

defcc closed this as completed Oct 29, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue 2.0 Problem with Slot #3965

Vue 2.0 Problem with Slot #3965

eugenio4 commented Oct 17, 2016

LinusBorg commented Oct 17, 2016 •

edited

Loading

eugenio4 commented Oct 17, 2016

LinusBorg commented Oct 18, 2016

eugenio4 commented Oct 18, 2016

eugenio4 commented Oct 18, 2016

defcc commented Oct 22, 2016

HerringtonDarkholme commented Oct 26, 2016

defcc commented Oct 26, 2016 •

edited

Loading

LinusBorg commented Oct 26, 2016

defcc commented Oct 27, 2016

LinusBorg commented Oct 27, 2016

defcc commented Oct 28, 2016

defcc commented Oct 29, 2016 •

edited

Loading

defcc commented Oct 29, 2016

Vue 2.0 Problem with Slot #3965

Vue 2.0 Problem with Slot #3965

Comments

eugenio4 commented Oct 17, 2016

LinusBorg commented Oct 17, 2016 • edited Loading

eugenio4 commented Oct 17, 2016

LinusBorg commented Oct 18, 2016

eugenio4 commented Oct 18, 2016

eugenio4 commented Oct 18, 2016

defcc commented Oct 22, 2016

HerringtonDarkholme commented Oct 26, 2016

defcc commented Oct 26, 2016 • edited Loading

LinusBorg commented Oct 26, 2016

defcc commented Oct 27, 2016

LinusBorg commented Oct 27, 2016

defcc commented Oct 28, 2016

defcc commented Oct 29, 2016 • edited Loading

defcc commented Oct 29, 2016

LinusBorg commented Oct 17, 2016 •

edited

Loading

defcc commented Oct 26, 2016 •

edited

Loading

defcc commented Oct 29, 2016 •

edited

Loading