Home>

I am studying the environment single page application of Vue.js + vue-router + Webpack4.

I am trying to call my Vue component from the vue-router page, but only the component part is not displayed.

to the console
Unknown custom element:<input-base>-did you register the component correctly? For recursive components, make sure to provide the "name" option.
Since the warning

has been issued, isn't the component importing failing? I think, but even if you change the import path, it will not improve.
In this case, where should the import path be written?
Or is it because it has nothing to do with it? . .

Folder hierarchy

I am trying to import components \ _input_base.vue (blue frame) from pages \ input.vue (red frame).

Applicable sources

input.vue

<template>
  <div>
    <h2>INPUT</h2>
    <p>
      Input-based display test<!-This is displayed->
      <input-base></input-base><!-This is not displayed->
    </p>
  </div>
</tempkate>
<script>
  import InputBase from '../components/_input_base';
  Vue.component (InputBase.name, InputBase);
  export default {
    data: function () {
        },
    // components: {
    // "input-base": InputBase,
    //},
  }
</script>

■ _input_base.vue

<template>
  <span>
     Display test
  </span>
</template>
<script>
  export default {
    'name': 'input-base',
  }
</script>


■ _router.js

// import routes from 'vue-auto-routing'
import Vue from 'vue';
import VueRouter from 'vue-router';
// page import
import InputPage from './pages/input';
Vue.use (VueRouter);
const Home = {template: '<span></span>'}
export default new VueRouter ({
  routes: [{path: '/', component: Home},
    {path: '/ input', component: InputPage}
  ]
});
Tried

Change import path

I tried the following pattern, but it was not.
Don't forget each time with bundled webpack → Try clearing the browser cache.

// import InputBase from 'src/js/components/_input_base';
  // import InputBase from './src/js/components/_input_base';
  // import InputBase from '/ js/components/_input_base';
  // import InputBase from './js/components/_input_base';
  // import InputBase from './components/_input_base';
  // import InputBase from '/ components/_input_base';
  // import InputBase from './_input_base';
  // import InputBase from '/ _input_base';
  // import InputBase from '../_input_base';
  import InputBase from '../ components/_input_base';

■ Try loading components \ _input_base with _router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
// page import
// import InputPage from './pages/input';
import InputPage from './components/_input_base';// ☆ Try this

Vue.use (VueRouter);
const Home = {template: '<span></span>'}
export default new VueRouter ({
  routes: [
    {path: '/', component: Home},
    {path: '/ input', component: InputPage}
  ]
});

→ The component is displayed.

■ Name the component

Search for a warning and I arrived at this article (stackoverflow) , but I couldn't understand why it was solved.
Since there was "You also need to have the same name while you export" on the way, I tried naming the component, but it did not change.

<script>
  export default {
    'name': 'input-base', // here
    data: function () {
            return {
                method_name: this.id + "_ selected"
            }
        },
  }
</script>
Environment

webpack: 4.17.1
vue: 2.5.17
vue-router: 3.0.1
vue-loader: 15.4.0
vue-template-compiler: 2.5.17

  • Answer # 1

    I'm very sorry ... my spelling mistake.

    input.vue

    <template>
      <div>
        <h2>INPUT</h2>
        <p>
          Input-based display test<!-This is displayed->
          <input-base></input-base><!-This is not displayed->
        </p>
      </div>
    </tempkate>// ← here

    This causes the template not to close and enters<script>,
    It seems that the import sentence that was originally written was not recognized properly.

    import statement is

    import InputBase from '../ components/_input_base';


    I was able to read it properly.

    For information on loading components,

    // Vue.component (InputBase.name, InputBase);← This will cause an error during execution
      export default {
        data: function () {
            },
        // ↓ This is OK!
        components: {
          InputBase,
        },
      }


    have become.
    This was noticed by t_shinohara.

    I knew that if the import path was wrong, an error would occur when bundling with webpack.
    When I did not get an error, I should have noticed that it was not recognized as syntax. . .
    I studied.

  • Answer # 2

    How about correcting the script part of the input.vue source as follows

    import input-base from '../components/_input_base';
      // Vue.component (InputBase.name, InputBase);
      export default {
        data: function () {
        },
        components: {
          input-base
        }
      }