Vue component working main Vue instance but not in Vue Router component

1
votes

I have set up a Laravel / Vue app with the main element (#app) for my app in my welcome.blade.php file. Then I have app.js file in which I initiate my Vue instance. And then there's my routes.js and MyComponent.vue files.

In MyComponnent.vue I am trying to load vue-winwheel. But I keep getting this warning:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

And the component won't load. If I use directly in my welcome.blade.php file it does load, but in the wrong place of course.

I did register VueWinwheel globally (tested both VueWinwheel and vue-winwheel). Anyone have any ideas what I'm missing?

app.js

import Vue from 'vue';
import Vuex from 'vuex'
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue'
import VueWinwheel from 'vue-winwheel/vue-winwheel'
import routes from './routes';

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

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

require('./bootstrap');

let app = new Vue({
	el: '#app',
	router: new VueRouter(routes),
	components: {
		VueWinwheel
	}
});

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="icon" type="image/png" href="{{ asset('images/FavIcon-64.png') }}" />
        <link rel="stylesheet" href="{{ mix('/css/app.css') }}">

        <title>My App with VueWinwheel</title>
    </head>
    <body>
        <div id="app" class="col-xs-12 text-center">
            <transition name="slideFade" mode="out-in">
                <router-view></router-view>
            </transition>
            <vue-winwheel /> <!-- This one does work -->
        </div>
        
        <script src="/js/app.js"></script>
    </body>
</html>

MyComponent.vue

<template>
	<section class="winwheel-section">
		<vue-winwheel /> <!-- This one does not work and makes the warning show in console -->
	</section>
</template>

<script>
	module.exports = {
		data: function(){
			return {
				
			}
		}
	}
</script>

router.js

import MyComponent	from './components/MyComponent';

export default{
	mode: 'history',

	routes: [
		{
			path: '/',
			component: MyComponent,
			name: 'MyComponent'
		}
	]
}

UPDATE

I have tried what @AbdulAzeez Olanrewaju suggested (and tried it before). But this gave me an error in my npm vue watch terminal:

"export 'default' (imported as 'mod') was not found in '-!../../../node_modules/babel-loader/lib/index.js??ref--4-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Spin.vue?vue&type=script&lang=js&'

2
vue.jsvue-componentvue-router
I think you need to add import VueWinwheel from 'vue-winwheel/vue-winwheel' in the vue file you want to use it – AbdulAzeez Olanrewaju
@AbdulAzeezOlanrewaju, I have tried that, gives me this compiling error: "export 'default' (imported as 'mod') was not found in '-!../../../node_modules/babel-loader/lib/index.js??ref--4-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Spin.vue?vue&type=script&lang=js&' – TheLD
I actually think it would be the best solution, but I can't seem to import anything in my Vue files. – TheLD

2 Answers

0
votes

You could try and change

let app = new Vue({
    el: '#app',
    router: new VueRouter(routes),
    components: {
        VueWinwheel
    }
});

to 

let app = new Vue({
    el: '#app',
    router: new VueRouter(routes),
    components: {
        'vue-winwheel': VueWinwheel
    }
});

Also i do not think you need to use the Vue.use(VueWinWheel);

0
votes

I have found the answer.

I could not import Winwheel inside my MyComponent.vue because I used module.exports. When I use export default it did work.

So:

<!-- This -->
<script>
	export default {
		data: function(){
			return {
				
			}
		}
	}
</script>

<!-- Instead of this -->
<script>
	module.exports = {
		data: function(){
			return {
				
			}
		}
	}
</script>

<!-- Note that I also remove the = after module.exports