What is the right way of Vue.js "extend" usage?

Question

Experimenting with Vue.js 2 I've made a little project and trying to import a component, but there's an empty page in a browser. I want to use "extend" in order to try this example: https://jsfiddle.net/xmqgnbu3/1/

So my main.js looks like this:

import Vue from 'vue'
import WorkZone from './components/WorkZone.vue'
import App from './App.vue'

var vm = new Vue({
    el: '#app',
    components: {
      'work-zone': WorkZone,
      'app': App
    }
});

My App.vue file:

<template>
  <div id="app">
    <work-zone></work-zone>
  </div>
</template>

<script>
    import WorkZone from './components/WorkZone.vue';
    export default {
        name: 'app',
        components: {
            'work-zone': WorkZone
        },
        data() {
          return {}
        },
        methods: {}
    };
</script>

My WorkZone.vue file:

var WorkZone = Vue.extend({
    template: `
    <div id="work-zone">
        <div id="wrapper"></div>
    </div>`,
    data() {
        return {
            tabItems: [{
                title: 'Главная страница',
                project: 'Текст главная страница',
                done: false,
            }],
        };
    },
    methods: {
        createTab: function(newTab) {
            this.tabItems.push(newTab);
        }
    }
});

The idea is that later there will be a sidebar with buttons. Each button will add an element in a Work-zone or in any other component on a page. I want this function ("function addElem()" for example) to be accessible in any component.

Does an element with the id, `app`, exist on the page main.js runs on? — Bert, Apr 18 '17 at 18:35
Root component with id="app" appears. It is empty. Now I've tried to add Vue.component('work-zone', WorkZone); to WorkZone.vue and changed main.js to var bizon = new Vue({ el: '#app', template: '', components: { App, 'work-zone': WorkZone }, }); WorkZone appeared, but with an error Failed to mount component: template or render function not defined. — rinatoptimus, Apr 18 '17 at 18:38
Can you show the HTML for the page? Second, you do not need `Vue.extend` in this case. Your WorkZone.vue file should look like your App.vue file with a template and script sections. — Bert, Apr 18 '17 at 18:41
I think you are trying to attach your vue components to the element in App.vue, which is wrong and wont work. Your main.js file should be in a parent file with an element (id=app). You dont need the App component at all, its irrelevent. — f_i, Oct 24 '17 at 13:55

score 0 · Answer 1 · answered Oct 24 '17 at 14:01

main.js

 var WorkZone = Vue.extend({
        template: `
        <div id="work-zone">
            <div id="wrapper">
            <ul v-for="item in tabItems">
            <li>{{ item.title }}</li>
            </ul>
            <button @click="createTab({title: 'Hello', project: 'World', done: false})">Create Tab</button>
            </div>
        </div>`,
        data() {
            return {
                tabItems: [{
                    title: 'Главная страница',
                    project: 'Текст главная страница',
                    done: false,
                }],
            };
        },
        methods: {
            createTab: function(newTab) {
                this.tabItems.push(newTab);
            }
        }
    });

    var vm = new Vue({
        el: '#app',
        components: {
          'work-zone': WorkZone
        }
    });

Your html file:

<div id="app">
   <work-zone></work-zone>
</div>

What is the right way of Vue.js "extend" usage?

1 Answers1