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> </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, } });
Advertisement
Answer
You should use Single File Components, as described in the documentation. Next to it, read this useful blog post about using SFC’s.