How to use Vue3 via CDN on Django without NodeJs bundler?

user_11476796 0
Viewed 3210

On Vue2 I just add the CDN then I have Vue available on my js files, but Vue3 I could not do the same - My js files does not detect Vue. How can I solve it in order to use Vue3?

vuejs3 vue.js django javascript
2 Answers

You will need to include the new vue js file

You can get source from here https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.js and link or include in your project

I cut out some stuff (axios, methods, template, etc.) But this should give you an idea.

The important parts...

  • use createApp from Vue either using Vue.createApp or using destructuring
  • data needs to be a function that returns an object

Example:

const app = Vue.createApp({
  el: '#app',
  delimiters: ['[[', ']]'],
  data() {
    return {
      returned_task: '',
      new_task: '',
      create_modify: '',
      modify_id: -1,
      modify_index: -1,
      tasks: []
    }
  },
  created() {
    this.tasks = ['do this ‍', 'and that '];
  },
});

app.mount('#app')
<script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.prod.js"></script>
<div id="app">
  <ul>
    <li v-for="task in tasks">[[task]]</li>
  </ul>
</div>

user_1975460 

const app = Vue.createApp({
  el: '#app',
  delimiters: ['[[', ']]'],
  data() {
    return {
      returned_task: '',
      new_task: '',
      create_modify: '',
      modify_id: -1,
      modify_index: -1,
      tasks: []
    }
  },
  created() {
    this.tasks = ['do this ‍', 'and that '];
  },
});

app.mount('#app')
<script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.prod.js"></script>
<div id="app">
  <ul>
    <li v-for="task in tasks">[[task]]</li>
  </ul>
</div>

user_195331890
Related