connecteev/gist:0841b56451a7888b6b551100d6ffa1ab

## gistfile1.txt
<Button> and <Drawer> are both imported from iView (https://www.iviewui.com/components/drawer-en)
Having <Button> within Test.vue works fine, but not when I put it in header.blade.php (which is what I want to do)

--------------------------------------------------

app.blade.php:

<!DOCTYPE html>
<html>
    <head>
        <title>@yield('title'): {{env('APP_NAME')}}</title>
    </head>
    <body>
        <div id="app">
            @include('partials.header', [])
            @yield('content')
            @include('partials.footer', [])
        </div>

        <script src="{{ mix('js/app.js') }}"></script>
        @yield('scriptsSection')
    </body>
</html>

--------------------------------------------------

resources/js/app.js:

require('./bootstrap');

import Vue from 'vue';
import iView from 'iview';
import '../less/iviewui_custom_theme/index.less';
import locale from 'iview/dist/locale/en-US';
Vue.use(iView, { locale });

import TestComponent from './components/iview_components/Test.vue';
Vue.component('TestComponent', TestComponent);

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


--------------------------------------------------

js/components/iview_components/Test.vue:
<template>
    <div>
        <Drawer title="Basic Drawer" :closable="false" v-model="drawerVisible">
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
        </Drawer>
        <!--<Button @click="drawerVisible = true" type="primary">Open Drawer</Button>-->
   </div>
</template>
<script>
    export default {
        data () {
            return {
                drawerVisible: false
            }
        }
    }
</script>
--------------------------------------------------

resources/views/partials/header.blade.php:

<header>
    <test-component></test-component>
    <Button @click="drawerVisible = true" type="primary">Open Drawer</Button>
</header>

--------------------------------------------------
	<Button> and <Drawer> are both imported from iView (https://www.iviewui.com/components/drawer-en)
	Having <Button> within Test.vue works fine, but not when I put it in header.blade.php (which is what I want to do)

	--------------------------------------------------

	app.blade.php:

	<!DOCTYPE html>
	<html>
	<head>
	<title>@yield('title'): {{env('APP_NAME')}}</title>
	</head>
	<body>
	<div id="app">
	@include('partials.header', [])
	@yield('content')
	@include('partials.footer', [])
	</div>

	<script src="{{ mix('js/app.js') }}"></script>
	@yield('scriptsSection')
	</body>
	</html>

	--------------------------------------------------

	resources/js/app.js:

	require('./bootstrap');

	import Vue from 'vue';
	import iView from 'iview';
	import '../less/iviewui_custom_theme/index.less';
	import locale from 'iview/dist/locale/en-US';
	Vue.use(iView, { locale });

	import TestComponent from './components/iview_components/Test.vue';
	Vue.component('TestComponent', TestComponent);

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


	--------------------------------------------------

	js/components/iview_components/Test.vue:
	<template>
	<div>
	<Drawer title="Basic Drawer" :closable="false" v-model="drawerVisible">
	<p>Some contents...</p>
	<p>Some contents...</p>
	<p>Some contents...</p>
	</Drawer>
	<!--<Button @click="drawerVisible = true" type="primary">Open Drawer</Button>-->
	</div>
	</template>
	<script>
	export default {
	data () {
	return {
	drawerVisible: false
	}
	}
	}
	</script>
	--------------------------------------------------

	resources/views/partials/header.blade.php:

	<header>
	<test-component></test-component>
	<Button @click="drawerVisible = true" type="primary">Open Drawer</Button>
	</header>

	--------------------------------------------------