Install vue or update it.
Install:
sudo npm install -g @vue/cli

Or, update it:

sudo npm update -g @vue/cl

Install vue addon for rapid prototyping:

npm install -g @vue/cli @vue/cli-service-global

In the django project’s root,

vue create vueapp

Output:

(venv) [email protected]:~/emr$ vue create vueapp


Vue CLI v4.5.13
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)


Vue CLI v4.5.13
✨  Creating project in /home/joel/emr/vueapp.
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]3" is an optional dependency and failed compatibility check. Excluding it from installation.


success Saved lockfile.
Done in 21.95s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 17.94s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vueapp.
👉  Get started with the following commands:

 $ cd vueapp
 $ yarn serve

As suggested, type:

cd vueapp
yarn serve

Output:

(venv) [email protected]:~/emr$ cd vueapp/
(venv) [email protected]:~/emr/vueapp$ yarn serve
yarn run v1.22.5
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin
 DONE  Compiled successfully in 2018ms                                                                                                                                                                    1:45:07 AM

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.29.135:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

Now we can see the default Vue app at http://localhost:8080/

Folder structure:

[email protected]:~/emr/vueapp$ tree -L 1
.
├── babel.config.js
├── node_modules
├── package.json
├── public
├── README.md
├── src
└── yarn.lock

[email protected]:~/emr/vueapp$ tree -L 2 src/
src/
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
└── main.js

Thus we can see that our Vue files are in the src subfolder, and that main.js has to load first.

Open VS code in this folder

code .

Contents of main.js:

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

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

Setup django static files by following the official tutorial.

Next, move the vueapp directory to a location under static directory list. For me, I did:

mv vueapp shorten/static/shorten/

where shorten is the name of my app, and my static setting is this, in settings.py:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = "/static/"

INSTALLED_APPS = [
    ...
    "django.contrib.staticfiles",
    ...
]

Now, load the javascript files in our template.

{% load static %}
<script type="text/javascript" src="{% static 'src/vue/dist/js/chunk-vendors.js' %}"></script>
<script type="text/javascript" src="{% static 'src/vue/dist/js/app.js' %}"></script>

Now we can start both the django server and the vue server and test.

From the django project folder run

./manage.py runserver

And from the vueapp folder, run

yarn serve

If it worked, we can see the Vue code working inside the “app” element.

To serve to production, run:

yarn build
(venv) [email protected]:~/emr/vueapp$ yarn build
yarn build
yarn run v1.22.5
$ vue-cli-service build
⠦  Building for production...
 DONE  Compiled successfully in 5322ms                                                                                                                                                                    2:31:05 AM
  File                                      Size                                                                               Gzipped
  ../../src/vue/dist/js/chunk-vendors.js    147.13 KiB                                                                         52.86 KiB
  ../../src/vue/dist/js/app.js              4.53 KiB                                                                           1.62 KiB
  ../../src/vue/dist/css/app.css            0.33 KiB                                                                           0.23 KiB
  Images and other types of assets omitted.
 DONE  Build complete. The ../../src/vue/dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
      
Done in 7.60s.
(venv) [email protected]:~/emr/vueapp$ 

Now we can run collectstatic to collect all our static resources.

(venv) [email protected]:~/emr$ ./manage.py collectstatic

You have requested to collect static files at the destination
location as specified in your settings:

    /home/joel/emr/staticfiles

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes

60 static files copied to '/home/joel/emr/staticfiles', 25208 unmodified, 48311 post-processed.

Now, try running the server again

Note that `yarn build` must be built each time code is changed in debug too..

References:

  1. Better Programming Blog Visit the blog for details.