Unknown custom element Vue.js how to solve?

K

kd241286zjv2018-12-06 19:21:47

Vue.js

kd241286zjv, 2018-12-06 19:21:47

Hi all. Googling a lot about this, but nothing helped.
there is spa.blade.php:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LK NN</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  </head>
  <body>
    <div id="app">
      <main-app></main-app>
    </div>
      <script src="{{ asset('js/app.js') }}"></script>
  </body>
</html>

there is app.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {routes} from './routes';
import MainApp from './components/MainApp.vue';

Vue.use(VueRouter);
Vue.use(Vuex);


const router = new VueRouter({
  router,
  mode: 'history'
});

const app = new Vue({
  el: '#app',
  router,
  components: {
    MainApp,
  }
});

and mainApp.vue itself:

<template>
  <div class="container-fluid">
    <header>
...
    </header>
    <main>
...
    </main>
    <footer>
...
    </footer>
  </div>
</template>
<script>
  export default {
    name: 'main-app'
  }
</script>

where is the error from? in the export of the component I specify its name, I import the component into app.js, I send it to components in the initialization. help plz

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

L

Lumore, 2018-12-06
@Lumore

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {routes} from './routes';
import MainApp from './components/MainApp.vue';

Vue.use(VueRouter);
Vue.use(Vuex);

Vue.component('main-app', MainApp);

const router = new VueRouter({
  router,
  mode: 'history'
});

const app = new Vue({
  el: '#app',
  router
});