Django CRUD Application with VueJs as front-end | VueJs + Django Rest Framework + MySQL example

https://grokonez.com/frontend/vue-js/django-crud-application-with-vuejs-as-front-end-vuejs-django-rest-framework-mysql-example-part-3-vuejs-client

Django CRUD Application with VueJs as front-end | VueJs + Django Rest Framework + MySQL example – Part 3: VueJs Client

This tutorial is part 3 of Django-VueJs-MySQL series. Today, we will create Vuejs Client to make HTTP request & receive response from Django Server.

>> Part 1: Overview
>> Part 2: Django Server

Video

[Coming soon...]

VueJs Client Overview

Goal

The image below shows overview about Vuejs Components that we will create:

Project Structure

– package.json with 3 main modules: vue, vue-router, axios.
– 4 components: CustomersList, Customer, AddCustomer, SearchCustomer.
– router.js defines routes, each route has a path and maps to a component.
– http-common.js initializes HTTP Client with baseUrl and headers for axios HTTP methods.
– vue.config.js configures port for Vue App.

For more details about how to use Vue Router in this example, please visit:
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

Setup VueJs Project

Init Project

Point cmd to the folder you want to save Project folder, run command:
vue create vue-django

You will see 2 options, choose default

Add Vue Router to Project

– Run command: npm install vue-router.
– Import router to src/main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

https://grokonez.com/frontend/vue-js/django-crud-application-with-vuejs-as-front-end-vuejs-django-rest-framework-mysql-example-part-3-vuejs-client