connecteev/laravel_vue_app

## laravel_vue_app
app.blade.php:
```
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <title>@yield('title'): {{env('APP_NAME')}}</title>
        <link rel="stylesheet" href="{{ mix('/css/my_tailwind.css') }}">
        @yield('cssSection')
    </head>
    <body>
        <div>
            @include('partials.header', [])
            @yield('content')
            @include('partials.footer', [])
        </div>

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

```

This is my app.js. Note: iview is a front-end vue library like vuetify: https://www.iviewui.com
```

require('./bootstrap');

//window.Vue = require('vue');
import Vue from 'vue';

// ./components/ExampleComponent.vue -> <example-component></example-component>
//Vue.component('example-component', require('./components/ExampleComponent.vue'));

import myiView from './components/IViewUI.vue';
import iView from 'iview';
//import 'iview/dist/styles/iview.css';

// Customize the iviewui theme, see https://www.iviewui.com/docs/guide/theme-en
import '../less/iviewui_custom_theme/index.less';
import locale from 'iview/dist/locale/en-US';
Vue.use(iView, { locale });

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


```

IViewUI.vue:
```
<template>
  <div id="myiviewui">
    <div>
      <modal-example></modal-example>
    </div>
    <div>
      <drawer-example></drawer-example>
    </div>
  </div>
</template>
<script>
  import ModalExample from './iview_components/Modal.vue';
  import DrawerExample from './iview_components/Drawer.vue';

  export default {
    name: 'myiviewui',
    data () {
      return {
      }
    },
    components: {
      'modal-example': ModalExample,
      'drawer-example': DrawerExample,
    }
  };
</script>
<style scoped>
  /* Add scoped styles */
</style>

```

Drawer.vue: Derived from https://www.iviewui.com/components/drawer-en
```
<template>
    <div>
        <Button @click="drawerVisible = true" type="primary">Drawer Open</Button>
        <Drawer title="Basic Drawer" :closable="false" v-model="drawerVisible">
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
        </Drawer>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                drawerVisible: false
            }
        }
    }
</script>

```
header.blade.php (this is where I want to include a button, to trigger the Drawer: https://www.iviewui.com/components/drawer-en)
by using <drawer-example></drawer-example>
```
<header id="mainHeader" class="tw-fixed tw-w-full tw-top-0 tw-z-50">
</header>
```
	app.blade.php:
	```
	<!DOCTYPE html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<title>@yield('title'): {{env('APP_NAME')}}</title>
	<link rel="stylesheet" href="{{ mix('/css/my_tailwind.css') }}">
	@yield('cssSection')
	</head>
	<body>
	<div>
	@include('partials.header', [])
	@yield('content')
	@include('partials.footer', [])
	</div>

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

	```

	This is my app.js. Note: iview is a front-end vue library like vuetify: https://www.iviewui.com
	```

	require('./bootstrap');

	//window.Vue = require('vue');
	import Vue from 'vue';

	// ./components/ExampleComponent.vue -> <example-component></example-component>
	//Vue.component('example-component', require('./components/ExampleComponent.vue'));

	import myiView from './components/IViewUI.vue';
	import iView from 'iview';
	//import 'iview/dist/styles/iview.css';

	// Customize the iviewui theme, see https://www.iviewui.com/docs/guide/theme-en
	import '../less/iviewui_custom_theme/index.less';
	import locale from 'iview/dist/locale/en-US';
	Vue.use(iView, { locale });

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


	```

	IViewUI.vue:
	```
	<template>
	<div id="myiviewui">
	<div>
	<modal-example></modal-example>
	</div>
	<div>
	<drawer-example></drawer-example>
	</div>
	</div>
	</template>
	<script>
	import ModalExample from './iview_components/Modal.vue';
	import DrawerExample from './iview_components/Drawer.vue';

	export default {
	name: 'myiviewui',
	data () {
	return {
	}
	},
	components: {
	'modal-example': ModalExample,
	'drawer-example': DrawerExample,
	}
	};
	</script>
	<style scoped>
	/* Add scoped styles */
	</style>

	```

	Drawer.vue: Derived from https://www.iviewui.com/components/drawer-en
	```
	<template>
	<div>
	<Button @click="drawerVisible = true" type="primary">Drawer Open</Button>
	<Drawer title="Basic Drawer" :closable="false" v-model="drawerVisible">
	<p>Some contents...</p>
	<p>Some contents...</p>
	<p>Some contents...</p>
	</Drawer>
	</div>
	</template>
	<script>
	export default {
	data () {
	return {
	drawerVisible: false
	}
	}
	}
	</script>

	```
	header.blade.php (this is where I want to include a button, to trigger the Drawer: https://www.iviewui.com/components/drawer-en)
	by using <drawer-example></drawer-example>
	```
	<header id="mainHeader" class="tw-fixed tw-w-full tw-top-0 tw-z-50">
	</header>
	```