Created
April 3, 2020 14:54
-
-
Save oshosanya/5b2418eee087e0d817a0b91a71036386 to your computer and use it in GitHub Desktop.
Integrate vuejs into existing django app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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', }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% extends 'base.html' %} | |
| {% block body %} | |
| <example-component></example-component> | |
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| }, | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment