Leveraging Vue js components while utilizing it from a content delivery network (CDN

Question

Leveraging Vue js components while utilizing it from a content delivery network (CDN

I'm attempting to utilize the ButtonCounter component as a demonstration (source: https://vuejs.org/guide/essentials/component-basics.html#defining-a-component), but I am facing difficulties in getting it to function properly. I am utilizing Vue.js 3 from a CDN.

Here is the content of my ButtonCounter.js file:

export default {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You have clicked me {{ count }} times.
    </button>`
}

Next, I have the main JavaScript file with Vue:

import ButtonCounter from './ButtonCounter.js'


const app = Vue.createApp({
  components: {
    ButtonCounter
  },

  data() {
    return {
      aaa: []
    }
  },
  methods: {
    ...
  }
}
})

app.mount('#app')

Lastly, within the HTML document where I link Vue.js from the CDN, and specify the following inside the body:

<ButtonCounter />

Despite following these steps, I am unable to see the button. Could someone please advise me on what I might be doing wrong?

javascript vue.js

Answer 1

Answer №1

After struggling for a bit, I finally cracked the code with the help of the vue-loader project. If you're interested, check out https://github.com/FranckFreiburger/vue3-sfc-loader. It's an amazing resource!

index.html:

  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ee8ebfbadb3edf8fdb3f2f1fffafbecdeaeb0a6b0aa">[email protected]</a>/dist/vue3-sfc-loader.js"></script>

<div id="app">
  ....
  <ButtonCounter />
</div>

<script src="/main.js"></script>

main.js:

const { loadModule } = window['vue3-sfc-loader'];

const VueLoaderOpts = {
  moduleCache: { vue: Vue },
  async getFile(url) {
    const res = await fetch(url)
    if(!res.ok)
       throw Object.assign(new Error(url+' '+res.statusText), { res });
    return await res.text();
  },
  addStyle: () => {},
}

const app = Vue.createApp({
  components: {
    'ButtonCounter': Vue.defineAsyncComponent(() => loadModule('./ButtonCounter.vue', VueLoaderOpts))
  },

  data() {
    ...
  }
}

ButtonCounter.vue:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">
    You clicked me {{ count }} times yet.
  </button>
</template>

Answer 2

After struggling for a bit, I finally cracked the code with the help of the vue-loader project. If you're interested, check out https://github.com/FranckFreiburger/vue3-sfc-loader. It's an amazing resource!

index.html:

  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ee8ebfbadb3edf8fdb3f2f1fffafbecdeaeb0a6b0aa">[email protected]</a>/dist/vue3-sfc-loader.js"></script>

<div id="app">
  ....
  <ButtonCounter />
</div>

<script src="/main.js"></script>

main.js:

const { loadModule } = window['vue3-sfc-loader'];

const VueLoaderOpts = {
  moduleCache: { vue: Vue },
  async getFile(url) {
    const res = await fetch(url)
    if(!res.ok)
       throw Object.assign(new Error(url+' '+res.statusText), { res });
    return await res.text();
  },
  addStyle: () => {},
}

const app = Vue.createApp({
  components: {
    'ButtonCounter': Vue.defineAsyncComponent(() => loadModule('./ButtonCounter.vue', VueLoaderOpts))
  },

  data() {
    ...
  }
}

ButtonCounter.vue:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">
    You clicked me {{ count }} times yet.
  </button>
</template>

Answer 3

Answer №2

When you mount your Vue application, anything inside the <div id=app></div> in the index.html gets overwritten.

To ensure it works properly, place your code inside the template of your main.js file:

import ButtonCounter from './ButtonCounter.js'
const app = Vue.createApp({
    components: {
        ButtonCounter
    },
    template: `<ButtonCounter />`
})

app.mount('#app')

Remember, if you forget to add type=module on the script tag for your main.js, it will cause issues when you try to import.

Answer 4

When you mount your Vue application, anything inside the <div id=app></div> in the index.html gets overwritten.

To ensure it works properly, place your code inside the template of your main.js file:

import ButtonCounter from './ButtonCounter.js'
const app = Vue.createApp({
    components: {
        ButtonCounter
    },
    template: `<ButtonCounter />`
})

app.mount('#app')

Remember, if you forget to add type=module on the script tag for your main.js, it will cause issues when you try to import.

Answer 5

Answer №3

For those working with Vue 3, here's a helpful tip - you can utilize SFC with the assistance of a handy tool provided in this particular package

When setting up Vue in your script, consider using it in the following manner:

app.js

 // Setting up vue-sfc-loader
const options = {
    moduleCache: {
        vue: Vue,
    },
    async getFile(url) {
        const res = await fetch(url);
        if (!res.ok)
            throw Object.assign(new Error(res.statusText + " " + url), { res });
        return {
            getContentData: (asBinary) =>
                asBinary ? res.arrayBuffer() : res.text(),
        };
    },
    addStyle(textContent) {
        const style = Object.assign(document.createElement("style"), {
            textContent,
        });
        const ref = document.head.getElementsByTagName("style")[0] || null;
        document.head.insertBefore(style, ref);
    },
};

const { loadModule } = window["vue3-sfc-loader"];
// END Setup vue-sfc-loader

const base_component_url = '/static/assets/dashboard/js/vue/';

function load(path) {
    return Vue.defineAsyncComponent(() => loadModule(base_component_url + path, options))
}

const app = Vue.createApp({ 
    delimiters: ['[[', ']]'], 
    components: {
        'Greeting': load('components/test/Greeting.vue')
    }
});

app.mount('#__VUE');

To include the component in your HTML, do so like this:

<Greeting></Greeting>

or

<Greeting />

Answer 6

For those working with Vue 3, here's a helpful tip - you can utilize SFC with the assistance of a handy tool provided in this particular package

When setting up Vue in your script, consider using it in the following manner:

app.js

 // Setting up vue-sfc-loader
const options = {
    moduleCache: {
        vue: Vue,
    },
    async getFile(url) {
        const res = await fetch(url);
        if (!res.ok)
            throw Object.assign(new Error(res.statusText + " " + url), { res });
        return {
            getContentData: (asBinary) =>
                asBinary ? res.arrayBuffer() : res.text(),
        };
    },
    addStyle(textContent) {
        const style = Object.assign(document.createElement("style"), {
            textContent,
        });
        const ref = document.head.getElementsByTagName("style")[0] || null;
        document.head.insertBefore(style, ref);
    },
};

const { loadModule } = window["vue3-sfc-loader"];
// END Setup vue-sfc-loader

const base_component_url = '/static/assets/dashboard/js/vue/';

function load(path) {
    return Vue.defineAsyncComponent(() => loadModule(base_component_url + path, options))
}

const app = Vue.createApp({ 
    delimiters: ['[[', ']]'], 
    components: {
        'Greeting': load('components/test/Greeting.vue')
    }
});

app.mount('#__VUE');

To include the component in your HTML, do so like this:

<Greeting></Greeting>

or

<Greeting />

Leveraging Vue js components while utilizing it from a content delivery network (CDN

Answer №1

Answer №2

Answer №3

Similar questions

Unable to convert JavaScript object to C# through deserialization

Restricting Checkbox Choices with JavaScript by Leveraging the forEach Function

Utilizing a backup system to store environment variables within a configuration file

What methods can I use to stop the styles of a child component from impacting those of the parent component

Navigating through Next.js for slug URLs such as site.com/username

Exploring ElectronJs: The journey to sending messages from ipcMain to IpcRender and awaiting a response

The functionality to open the menu by clicking is experiencing issues

In my current project, I am working with Knockout and TypeScript but I am encountering difficulties in firing the window-resize event

How can one determine if a new document was created by Mongoose's upsert feature?

Enzyme's simulate() failing to produce expected results with onChange event

Response Headers in Google Cloud Functions

Learn the process of extracting an array of objects by utilizing an interface

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

Angular is failing to retrieve data from FS.readFile using promises

Creating a form that can identify both letters and numbers using JavaScript

Having trouble integrating a custom image upload adapter plugin into ckeditor 5 using vue js?

Ajax requests function properly only on one occasion

Attempting to loop through a JSON data structure in a React component

Maintain HTML formatting when page is refreshed

Create an unordered Vue component object