Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I store a Vue component outside html when using CDN?

The code is working, but I’d like to store my component outside of the HTML and then import it.
Ideally it should be in a component folder. Is it possible?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
</head>

<body>
    <div id="app">
        <test />
    </div>
    
    <script>
        const component1 = {
            template: `<div> <p>{{ item }}</p></div>`,
            props: ['prop'],
            data: () => ({ item: 'test' }),
        }

        const app = Vue.createApp({
            data: () => ({ someData: 'prop' }),
        })
        
        app.component('test', component1)
        app.mount('#app')
    </script>
</body>

</html>
Tags:

3

Answers


  1. 0

    Short answer: save your component in another file and use a script tag to import it, the same way as you did with Vue.

    Recomendation: usually people will bundle and package their JavaScript code before deploying. There are different tools for the job, but one option is Vite. Read more about it here: https://vitejs.dev/

    Login or Signup to reply.
  2. 0

    Yes, you can create a js file at, for ex. `components/component1.js’, with the definition for your component.

    const component1 = {
        template: `<div> <p>{{ item }}</p></div>`,
        props: ['prop'],
        data: () => ({ item: 'test' }),
    }

    Import that file in the html file with:

    <script src="components/component1.js"></script>

    and the component will be available in script section.

      <script>
        const app = Vue.createApp({
            data: () => ({ someData: 'prop' }),
        })
        
        app.component('test', component1)
        app.mount('#app')
    </script>
    Login or Signup to reply.
  3. 0

    You could try fetching the component as text and evaluating it.

    Although using eval is dangerous and should be avoided.

    Note: This assumes that you are not assigning the object in the CDN resource. If you are, Igor’s suggestion of loading it as JS is a better approach.

    // JavaScript object stored as text, loaded from CDN
const componentData = `{
  template: '<div> <p>{{ item }}</p></div>',
  props: ['prop'],
  data: () => ({ item: 'Hello World!' }),
}`;

// Simulate a fetch from CDN
const fetch2 = () => Promise.resolve({
  text: () => componentData // Load as text content?
});

// Use actual `fetch` instead
fetch2('https://link.to.cdn/component1.vue')
  .then(res => res.text())
  .then(text =>  eval(`(${text})`))
  .then(component1 => {
    const app = Vue.createApp({
      data: () => ({ someData: 'prop' }),
    })
    app.component('test', component1)
    app.mount('#app')
  });
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <test />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search