Vue stack components

Question

I'm building server UI and I'm struggling with components. Maybe someone knows how to stack all components and control all UI with functions? example

App.vue
- chat.vue
- hud.vue
- player.vue

I need to display all .vue in app.vue

App.vue

import chat from './components/chat.vue'

export default {
  name: 'app',
  components: {
    chat
  }
}

chat.vue

export default {
    methods: {
        test: function() {
            console.log("test");
        }
    }
}

How can I call the function test in the DevTools console, when I run the webiste?

RwwL RwwL · Accepted Answer · 2020-02-02T00:38:29

Do you know about the Vue Dev Tools browser extension? That will let you inspect all components on a page and tweak their data/props.

I don't think it will let you call their methods, but if you need to call one of those methods in the console you might try (temporarily, for testing purposes) making a component instance available on the window inside a mounted lifecycle function.

EDIT: Is that your entire App.vue, by the way? I'm thinking maybe I misunderstood your question and you think that...

  components: {
    chat
  }

...means that it should render the component on the page. It only makes it available for the parent component to use. You have to place it inside a <template> to actually render it.

Vue stack components

1 Answers