How to use Vue 'component' when you only added Vue as a page add-on (<script>)?

Question

I want to use a vue component called vue-timeago:

import VueTimeago from 'vue-timeago'

Vue.use(VueTimeago, {
  name: 'Timeago', // Component name, `Timeago` by default
  locale: undefined, // Default locale
  locales: {
    'zh-CN': require('date-fns/locale/zh_cn'),
    'ja': require('date-fns/locale/ja'),
  }
})

However, I didn't built my webapp as a complete Vue app. I used Django's templates function and only added Vue as an add-on on each page:

<script>
    let app = new Vue({
        delimiters: ['[[',']]'],
        el: '#app',
        data: {
           
        },
        ...

How can I use that component mentioned above? Thanks a lot!

Maxim Dyuzhinov · Accepted Answer · 2020-10-24 20:43:46Z

2

In theory you may add an attribute type="module" to the script tag and then import your component from a file but in this case you should handle all the dependencies manually. Obviously it's hard to do and it would be more practical to use a bundler to automate this part of the work.

I would propose the following steps:

Create a source.js that contains:

import Vue from 'vue'
import VueTimeago from 'vue-timeago'

let app = new Vue({
        delimiters: ['[[',']]'],
        el: '#app',
        components: {
           'Timeago': VueTimeago
        },
        data: {
           
        },
        ...

Compile source.js into a bundle.js using any bundler of your choice.
link bundle.js file on your page: <script src="bundle.js"></script>

answered Oct 24, 2020 at 20:43

Maxim Dyuzhinov

3082 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Vue 'component' when you only added Vue as a page add-on (<script>)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related