Setting up the vue file

Vue may not correctly work with the same template tags as django, i.e {{ }}. So we will modify this.

At vueapp/src/main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

In vueapp/src/App.vue:

<template>
  <div>
    Here is some data if vue is working. Start. {{ dummydata }} Stop.
  </div>
</template>

<script>
export default {
  name: "App",
  components: {
  },
  delimiters: ['[[',']]'],
  data() {
    return {
      dummydata: "My New Dummy Data. Vue is working!",
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

My main project urls.py (gettingstarted/urls.py):

from django.urls import path, include, re_path
from django.contrib import admin
admin.autodiscover()
import shorten.views
urlpatterns = [   
    path("admin/", admin.site.urls),
    path('api/', include('api.urls')),
    path('', include('shorten.urls')),
    re_path(r'^(?P<url>.*)/$', include('shorten.urls')),
]

In the app’s urls.py (shorten/urls.py):

from django.urls import path, include, re_path
from django.conf import settings
from . import views
from django.conf.urls.static import static
from django.contrib import admin

urlpatterns = [
    path('', views.main, name="main"),
    path('admin/', admin.site.urls),
    path('<path:shortlink>', views.catchlink),
] + static(
    settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

views.py

from django.http.request import HttpRequest
from django.http.response import HttpResponse
from django.shortcuts import render, redirect
from rest_framework import generics
from rest_framework.permissions import IsAuthenticated 
from rest_framework.authentication import TokenAuthentication
from .models import ShortLink
from api.serializers import ShortLinkSerializer

def main(request):
    return render(
        request, 'shorten/landing.html', {
    })

At shorten/templates/shorten/landing.html:

  <div class="col-lg-3 col-md-6 col-sm-12 text-center">
    <div class="card tasks_report">
      <div class="header">
        <h2>Short Links<small>All your created links</small></h2>
      </div>
      <div class="body">
        <ul id="app" class="inbox-widget list-unstyled clearfix">
          <li class="inbox-inner">            
          </li>
        </ul>
      </div>
    </div>
  </div>

After making changes in vue code, we need to run:

yarn build