Tips for utilizing Vue 'component' with just Vue added as a page add-on using <script>:

Question

Tips for utilizing Vue 'component' with just Vue added as a page add-on using <script>:

I am trying to incorporate 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'),
  }
})

My web application was not built as a complete Vue app. Instead, I utilized Django's templates feature and added Vue as an add-on on each page:

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

Is there a way for me to implement the mentioned component in this setup? Thank you!

javascript vue.js vuejs2

Answer 1

Answer №1

If you want to streamline the process of importing components from a file, one option is to add the attribute type="module" to the script tag. However, this approach requires manually handling all dependencies, which can be challenging. To simplify this task, it's recommended to use a bundler that automates this process.

Here are the suggested steps:

Create a source.js file with the following content:

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

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

Use any bundler of your choice to compile source.js into bundle.js.
Include the bundle.js file in your webpage like so:
```
<script src="bundle.js"></script>
```

Answer 2

If you want to streamline the process of importing components from a file, one option is to add the attribute type="module" to the script tag. However, this approach requires manually handling all dependencies, which can be challenging. To simplify this task, it's recommended to use a bundler that automates this process.

Here are the suggested steps:

Create a source.js file with the following content:

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

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

Use any bundler of your choice to compile source.js into bundle.js.
Include the bundle.js file in your webpage like so:
```
<script src="bundle.js"></script>
```

Tips for utilizing Vue 'component' with just Vue added as a page add-on using <script>:

Answer №1

Similar questions

Eliminate the localhost:8080 portion from the axios request URL

Properties that cannot be modified, known as read-only properties,

a JavaScript file containing only a require statement with a list of dependencies and a function

What is the best way to use jQuery to insert this block of HTML into a page from a JSON response?

Oh no! It seems like the build script is missing in the NPM

Utilizing deferred to ensure that one function completes before triggering a refresh

Testing mutations in vuex modules can be a crucial aspect of ensuring the stability and

Double Calling of Angular Subscription

Tips for incorporating a multiple tag search feature within my image collection using JavaScript?

Having trouble converting response.data to a string in ReactJS

Ways to obtain the <a> using the title attribute

Using the excel.js module in conjunction with node.js to create distinct columns within a header row

The flickering problem with HTML5 DOM

Troubleshooting Nuxtjs configuration issue with setting up Github Pages

Conditional return type mistakes

Using Express.js with synchronous functions can cause the web application to freeze

Achieving optimal hardware performance for WebGL compatibility is essential

Exploring the Vanilla JavaScript alternative to the jQuery.each() function

How can I handle JSON data that contains undefined values?

Migrating to Angular Universal for server-side rendering with an external API server