CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Stephan-v
Stephan-v

Reputation: 20309

Vue.js workflow from Vue.js 1 to 2

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.

Upvotes: 1

Views: 307

Answers (1)

Dan Gamble
Dan Gamble

Reputation: 4155

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

Upvotes: 1

Related Questions