How to import a component in Vuejs 2

Question

I'm really confused about importing a VueJs component.

I'm using Vuejs 2.2.4, and I need to import a Vuejs component. Here is my app.js:

Vue.component('Test', require('./Test.vue'));

const app = new Vue({
    el: '#vue-app',
});

Assume app.js is located in MyProject/js/app.js

And here is my component SimpleCompnent.vue :

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Simple Component</div>
                    <div class="panel-body">
                        I'm an Simple component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Simple Component mounted.')
        }
    }
</script>

Assume SimpleCompnent.vue is located in MyProject/js/SimpleCompnent.vue

Seems like Vue can't load the component! It throws this error in the browser console:

Uncaught ReferenceError: require is not defined

Saurabh · Answer 1 · 2017-08-11T16:10:40.113

3

Try:

import Test from './Test.vue'

You can see an example of it here.

edited Aug 11 '17 at 16:10

answered Mar 19 '17 at 10:14

Saurabh

71,488
40
181
244

1

`Uncaught SyntaxError: Unexpected token import` – Hamed Kamrava Mar 19 '17 at 10:24
@HamedKamrava You may need babel, check [this](http://stackoverflow.com/q/33440405/1610034), you can also check the setup of [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0/) as a vue project. – Saurabh Mar 19 '17 at 10:32
Link down... :( – jdstaerk Aug 11 '17 at 15:58
@jdstaerk Updated. – Saurabh Aug 11 '17 at 16:11
@Saurabh you're my hero :) – jdstaerk Aug 11 '17 at 20:10

Eliran Malka · Accepted Answer · 2017-03-19T10:42:51.220

Indeed, require cannot be used in a browser context without proper support, so you have couple of options:

Create (or fix) support for require.js in your app (see how here). As a first step, make sure you have a script tag that fetches require.js and has a data-main attribute that points to your app's entrypoint.
Use a CommonJS implementation for the client, like webpack or browserify, so requires can be written naturally in client-side code.
Use another module system implementation, e.g. on top of system.js or ES2015.

Either way, if you chose an implementation that uses imports (i.e. an ES2015 module system), you may want to use a transpiler that down-compiles your code to a language level the browser supports (avoiding those nasty Unexpected token import errors).

How to import a component in Vuejs 2

2 Answers2