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

How can I verify the status of an occasional undefined JSON value?

Having trouble retrieving data from the server for the POST request

Once the image has been observed, what steps can be taken to close it?

An error of type TypeError occurred while attempting to browserify a module in a Node.js environment

The code for the bouncing image isn't functioning properly outside of the JSFiddle environment

Enhance your browsing experience with a JavaScript bookmarklet that allows you to easily search through

Convert your AS3 code to JavaScript with our specialized compilers

Tips for sending an HTML form through Ajax, storing the data in a file, and then showcasing the results in a div

Issue with React component not receiving dataThe values are not being

Determine the height of the left div, which is set to auto, and apply the same height to the right div, which has overflow set

Guide on incorporating d3 axis labels within <a> elements?

Guidelines on launching an ionic 4 modal using routes

Personalize the menu item in material ui

Steer your keyboard attention towards the parent element that embodies a list

Check for non-null Sequelize Where conditions

Retrieve information from an API and populate a MDBootstrap datatable using Vue.js and Axios

How can you set a $_GET variable without having to reload the page?

Initiating a AJAX upload upon selection of a specific option from a select menu

Comparing Fetch and Axios: Which is Better?

Is there a different option than jQuery.ajaxSettings.traditional for use with XMLHttpRequest?