register component in vue,js

Question

I am working on a project in .NET with MVC and Vue.js, at the moment of wanting to use the components I have to declare it as follows:

import Vue from 'vue';

import example from './components/example.vue'
import equiposcrear from './components/equipos/crear.vue'
import equipos from './components/equipos/index.vue'
import cargardiesel from './components/equipos/cargarDiesel.vue'

const app = new Vue({
    el: '#app',
    components: {
        example,
        equiposcrear,
        equipos,
        cargardiesel
    }
})

If i registered as Vue.component('equipos', require('./components/equipos/index.vue'));

At the moment i want to use send the error that the component is not registered

@{
    ViewBag.Title = "Equipos";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="app">
    <equipos></equipos>
</div>

What am i doing wrong?

If you hit F12 in the browser, in the network tab can you see all the files are loading correctly? Are there any errors in the console? — bbsimonbb, Aug 23 '17 at 20:01
Are you saying it works in the first example, but you want to use `require` instead of `import`? — thanksd, Aug 23 '17 at 20:24
yes, first example work fine, bur with Vue.Component not working — German Ortiz, Aug 23 '17 at 20:26
Possible duplicate of [How to correctly use ES6 "export default" with CommonJS "require"?](https://stackoverflow.com/questions/35971042/how-to-correctly-use-es6-export-default-with-commonjs-require) — thanksd, Aug 23 '17 at 20:37

score 0 · Answer 1 · edited Jul 16 '22 at 03:52

0

A local component registration like you are doing has two parts. You need to specify the tag-name, then the source. Like this...

components: {
    'example': example,
    'equiposcrear' : equiposcrear,
    'equipos' : equipos,
    'cargardiesel' : cargardiesel
}

Here's the doc.

edited Jul 16 '22 at 03:52

tony19

125,647
18
229
307

answered Aug 23 '17 at 20:05

bbsimonbb

27,056
15
80
110

2

OP is using ES6, so it doesn't really matter if the object key has the same name as the imported variable. – yuriy636 Aug 23 '17 at 20:10
yes, if i use import example from './components/example.vue' and load the component as works well, but with Vue.component('example', require('./components/example.vue')); send the error component not register – German Ortiz Aug 23 '17 at 20:27

register component in vue,js

1 Answers1