Integration of Vue.js with Django

This video discusses the integration of a Vue.js project into a Django project. It covers the use of static files, such as JavaScript, image, and CSS styles bundled by Webpack, and demonstrates the auto-reload effect. The setup is convenient in some cases.

The tutorial then progresses to creating a Django project and setting up the templates folder. It explains how to specify the path to the templates folder in the settings.py file and create a root URL pattern in the root urls.py file. The video shows how to render the index.html template using the TemplateView class.

The next step involves creating a new Vue.js app. The video explains how to install Vue.js globally and create a new Vue app within the Django project. It then covers the installation and setup of additional packages, including django-webpack-loader for the Django side and webpack-bundle-tracker for the Vue side.

The video demonstrates how to change the Webpack settings in the frontend folder by creating the vue.config.js file. It explains the publicPath and outputDir properties, and sets splitChunks to false. The video also explains the purpose of the filename property and the webpack-stats.json file.

Finally, the video covers the installation of django-webpack-loader and how to load the render_bundle filter in the index.html file. It explains how to render the app and CSS styles, as well as where to paste the JavaScript files. It also mentions the default mount point for Vue objects.

The video concludes by demonstrating the restarting of the Django and Vue servers, and shows the rendered Vue.js object on the Django page.

If you enjoyed the video, please leave a like and subscribe to the channel. Thank you for watching!

video txt