oshosanya/ExampleComponent.vue

## app.js
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
* * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({ el: '#app', });

## base.html
<!DOCTYPE html>
<html>
    <head>
        <title>Django vue</title>
    </head>
    <body>
        <div id="app">
        {% block body %}
        {% endblock %}
        </div>
        <script src="{% static 'js/vue-app.js' %}"></script>
    </body>
</html>

## bootstrap.js
window._ = require('lodash');

/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {

}

/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

## ExampleComponent.vue
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

## index.html
{% extends 'base.html' %}
{% block body %}
<example-component></example-component>
{% endblock %}

## package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^6.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
}

## webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'assets/js/vue-app.js')
    .sass('resources/sass/app.scss', 'assets/css/vue-app.css');
	require('./bootstrap');
	window.Vue = require('vue');
	/**
	* The following block of code may be used to automatically register your
	* Vue components. It will recursively scan this directory for the Vue
	* components and automatically register them with their "basename".
	* * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
	*/

	// const files = require.context('./', true, /\.vue$/i)
	// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
	Vue.component('example-component', require('./components/ExampleComponent.vue').default);

	/**
	* Next, we will create a fresh Vue application instance and attach it to
	* the page. Then, you may begin adding components to this application
	* or customize the JavaScript scaffolding to fit your unique needs.
	*/
	const app = new Vue({ el: '#app', });
	<!DOCTYPE html>
	<html>
	<head>
	<title>Django vue</title>
	</head>
	<body>
	<div id="app">
	{% block body %}
	{% endblock %}
	</div>
	<script src="{% static 'js/vue-app.js' %}"></script>
	</body>
	</html>
	window._ = require('lodash');

	/**
	* We'll load jQuery and the Bootstrap jQuery plugin which provides support
	* for JavaScript based Bootstrap features such as modals and tabs. This
	* code may be modified to fit the specific needs of your application.
	*/
	try {
	window.Popper = require('popper.js').default;
	window.$ = window.jQuery = require('jquery');
	require('bootstrap');
	} catch (e) {

	}

	/**
	* We'll load the axios HTTP library which allows us to easily issue requests
	* to our Laravel back-end. This library automatically handles sending the
	* CSRF token as a header based on the value of the "XSRF" token cookie.
	*/
	window.axios = require('axios');
	window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
	<template>
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-md-8">
	<div class="card">
	<div class="card-header">Example Component</div>
	<div class="card-body">
	I'm an example component.
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>
	<script>
	export default {
	mounted() {
	console.log('Component mounted.')
	}
	}
	</script>
	{% extends 'base.html' %}
	{% block body %}
	<example-component></example-component>
	{% endblock %}
	{
	"private": true,
	"scripts": {
	"dev": "npm run development",
	"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
	"watch": "npm run development -- --watch",
	"watch-poll": "npm run watch -- --watch-poll",
	"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
	"prod": "npm run production",
	"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
	},
	"devDependencies": {
	"axios": "^0.19",
	"bootstrap": "^4.0.0",
	"cross-env": "^6.0",
	"jquery": "^3.2",
	"laravel-mix": "^5.0.1",
	"lodash": "^4.17.13",
	"popper.js": "^1.12",
	"resolve-url-loader": "^2.3.1",
	"sass": "^1.20.1",
	"sass-loader": "7.*",
	"vue": "^2.5.17",
	"vue-template-compiler": "^2.6.10"
	},
	}
	const mix = require('laravel-mix');

	mix.js('resources/js/app.js', 'assets/js/vue-app.js')
	.sass('resources/sass/app.scss', 'assets/css/vue-app.css');