Vue split components from a single .js file in multiple files

Question

I have created a component inside my index.js (where my main Vue code is). Now I would like to modularize the project and put the component into a separate file. I don't know how to do that because if I create e.g. optionalapm.js the main index.js returns an error that it can't locate the vue component optionalapm which I included.

How can I import the component into the index.js?

Here's my code of the component:

var optionalapm=Vue.component('optionalapm', {
props:['value'],
template:   `<div class="col-l-12 col-m-12 col-s-12 col-xs-emphased" style="background-color: #f9f9f9"">
                <p class="hidden-xl hidden-l hidden-m"></p>
                <p class="hidden-xl hidden-l hidden-m"></p> 
                <h3 style="text-align: center">APM</h3>
                <p>&nbsp;</p>
                <div class="col-l-4">
                    <p style="text-align: center">Number of nodes</p>
                    <div class="form-input-set">
                        <select v-bind:value='value' v-on:input="$emit('input', $event.target.value)" v-on:change="$emit('calcapmprice')" class="form-select" style="background: white">
                            <option value="apmnodes0">
                                <p style="text-align: center">0</p>
                            </option>                                            
                            <option value="apmnodes1">
                                <p style="text-align: center">1</p>
                            </option>
                            <option value="apmnodes2">
                                <p style="text-align: center">2</p>
                            </option>
                            <option value="apmnodes3">
                                <p style="text-align: center">3</p>
                            </option>  
                        </select>
                    </div> 
                </div>
              </div>`,       
})

And that's the relevant code in the index.js:

var ececontent = new Vue({
    el:'#ece-content',
    data: {
        ...
    },
    methods: {
        ...
    },
    components: {
        optionalapm: optionalapm,
    }

});

tony19 · Accepted Answer · 2022-07-15 22:03:12Z

2

You should use Single File Components, as described in the documentation. Next to it, read this useful blog post about using SFC's.

edited Jul 15, 2022 at 22:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 21, 2020 at 12:05

Marten

1,3846 gold badges28 silver badges51 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 01:25:56Z

0

May be this wil be useful https://v2.vuejs.org/v2/guide/single-file-components.html

And you can use js modules https://javascript.info/modules-intro if you want modularize the project

edited Jul 15, 2022 at 1:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 21, 2020 at 11:18

Grumaks

1599 bronze badges

2 Comments

Felixkruemel Over a year ago

Thanks for the links. As I understand from the vuejs guide it's not possible to just copy and paste the vue.component to another file right? It would be nice if I just could create a new file and include it in the index.JS file.

Grumaks Over a year ago

For this you need js modules. You can do it other way: put components into separate files, register it globally and include files in you page with script tag. But its not good way. I advise learn js modules. It is really useful for modularity

Collectives™ on Stack Overflow

Vue split components from a single .js file in multiple files

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related