Vue.js workflow from Vue.js 1 to 2

Question

I have followed the Vue.js lessons from laracasts when Vue.js 1 came out and I used to do something like this:

import Comments from './components/Comments.vue';
import Upload from './components/Upload.vue';

new Vue({
    el: 'body',

    components: {
            Comments,
            Upload,
            Preview,
            Algolia,
        },

    etc,
});

This allowed me to kind of 'sprinkle' components all over my application. I can no longer bind to the body though because Vue replaces the content and also throws an error message saying you shouldn't bind to the body or html.

I followed a couple of lessons for Vue.js 2 but how can I replicate this workflow in the Vue.js 2 manner? I loved just binding to the body and having the option to place a component here and there with the custom tags.

Make it <body><div id="app"></div></body> and bind to #app? — ceejayoz
– ceejayoz, Commented Jan 31, 2017 at 13:50
@ceejayoz wouldn't this clear out the entire app wrapper though? You would have effectively shushed the warning but wouldn't my entire body still be gone? — Stephan-v
– Stephan-v, Commented Jan 31, 2017 at 13:52
@Stephan-v nope! For the same reason binding on body currently doesn't clear out the entire app. Tbh Vue 2 doesn't handle the sprinkling of components through an app as well as Vue 1 does but it works for the most part — Dan Gamble
– Dan Gamble, Commented Jan 31, 2017 at 13:57

Dan Gamble · Accepted Answer · 2017-01-31 14:01:53Z

1

We use the same "sprinkling" approach and all we did was change it from 'body' to '#app'.

We also added a wrapping element inside that had this id to basically replicate body. (https://github.com/onespacemedia/project-template/blob/develop/%7B%7Bcookiecutter.repo_name%7D%7D/%7B%7Bcookiecutter.package_name%7D%7D/templates/base.html#L62)

<body>
  <div id="app">
    ...
  </div>
</body>

We use Jinja2 for our templating language and have found when a variable that doesn't resolve in Jinja2 it tanks Vue as well as i think Vue tries to use it.

I believe it takes everything inside #app after initial render and converts it to virtual dom. This doesn't effect anything from what i've seen though so you can happily just add the wrapping class inside body and use it the same as Vue 1

answered Jan 31, 2017 at 14:01

Dan Gamble

4,1852 gold badges28 silver badges46 bronze badges

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

6 Comments

Stephan-v Over a year ago

I was using the runtime version and wit the runtime version you can't actually use template tags inside your html. Guess I got that solved.

Dan Gamble Over a year ago

Gotcha, we use the runtime version too but behind webpack with vue-loader and vue-template-compiler to turn the .vue files into render functions (github.com/onespacemedia/project-template/blob/develop/…) and (github.com/onespacemedia/project-template/blob/develop/…)

Stephan-v Over a year ago

@DabGamble whenever I use $mount() I am instantly getting a standalone build though it looks like you are doing pretty much the same. I can't see why you would be getting a runtime build, just by looking at your main.js file.

Dan Gamble Over a year ago

@Stephan-v if you check the 2nd link, the webpack config, you can see the vue alias that allows it

Stephan-v Over a year ago

the 'vue': 'vue/dist/vue' in your webpack config points to the standalone version though. The one that is not even intended for webpack use because that should be vue/dist/vue.common.js so I am sorry but I still don't see where you are getting a runtime build from. Sorry to keep on bitching but I would love to get this figured out :P

|

Collectives™ on Stack Overflow

Vue.js workflow from Vue.js 1 to 2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related