Vue.js loading single-file components

Question

I'm new to Vue.js and want to use single-file components, but I don't understand the workflow.

For example, I have three components: App, Grid and List

App.vue

<template>
    <div id="app">
        <div id="grid"></div>
        <div id="right"></div>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello Vue!'
            }
        }
    }
</script>

Grid.vue

<template>
    <div id="left"></div>
</template>

<script>
    export default {
        name: 'grid',
        data: function () {
            return {
                grid: 'some-data'
            }
        }
    }
</script>

List.vue

<template>
    <div id="right"></div>
</template>

<script>
    export default {
    name: 'list',
    data: function () {
        return {
            text: 'some-text'
        }
    }
}
</script>

Main.js

import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'

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

new Vue({
    el: '#grid',
    render: h => h(Grid)
});

new Vue({
    el: '#right',
    render: h => h(PatternList)
});

It works but I hope this isn't the right way to create nested components.

Can anyone show the way it should be done? Thanks

tony19 · Accepted Answer · 2022-07-15 19:42:49Z

67

You can register components using the Vue.component method:

import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'

Vue.component('grid', Grid);
Vue.component('pattern-list', PatternList);

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

And then add them to the App template directly using their tag name:

<template>
  <div id="app">
    <grid></grid>
    <pattern-list></pattern-list>
  </div>
</template>

This registers the components globally, meaning that any Vue instance can add those components to their templates without any additional setup.

You can also register components to a Vue instance, like so:

new Vue({
  el: '#app',
  render: h => h(App),
  components: {
    'grid': Grid,
    'pattern-list': PatternList
  }
});

Or within the script tag of a single-file component:

<script>
import Grid from './vue/Grid.vue'

export default {
  name: 'app',
  components: {
    'grid': Grid,
    'pattern-list': PatternList
  }
});
</script>

This registers the components just to that Vue instance, meaning that those registered components will only be available to use within the template for that Vue instance. A child component would not have access to those registered components unless those components are also registered to the child Vue instance.

edited Jul 15, 2022 at 19:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 15, 2017 at 13:14

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

3 Comments

Dmitry Over a year ago

Thanks a lot! Thats what I was searching.

Johncl Over a year ago

Very nice summary! The Vue documentation pages is not very good at explaining this and showing the content of each file. One thing I found confusing was that each component has a "name" value in the data() function but that name is not actually used anywhere. I thought that was the name of the tag or something, but I see you actually give the tag its name either when you globally import it with Vue.component or the local components config.

Travis Bear Over a year ago

Great response, this is a beautiful example of how good a stack overflow answer can be.

Collectives™ on Stack Overflow

Vue.js loading single-file components

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related