Monday, December 11, 2023
 Popular · Latest · Hot · Upcoming
rated 0 times [  60] [ 3]  / answers: 1 / hits: 10650  / 4 Years ago, fri, february 21, 2020, 12:00:00

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', {
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>
<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', $ v-on:change=$emit('calcapmprice') class=form-select style=background: white>
<option value=apmnodes0>
<p style=text-align: center>0</p>
<option value=apmnodes1>
<p style=text-align: center>1</p>
<option value=apmnodes2>
<p style=text-align: center>2</p>
<option value=apmnodes3>
<p style=text-align: center>3</p>

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

var ececontent = new Vue({
data: {
methods: {
components: {
optionalapm: optionalapm,


More From » vue.js


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

[#4677] Wednesday, February 19, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 92
Total Questions: 88
Total Answers: 96

Location: China
Member since Fri, Jan 15, 2021
3 Years ago
dylondaytond questions
Tue, Jun 22, 21, 00:00, 3 Years ago
Thu, May 7, 20, 00:00, 4 Years ago
Fri, Aug 16, 19, 00:00, 4 Years ago