Vuejs - require is not defined

Question

I am just playing around with vuejs router and try to load a component. I used the sample code and changed foo

// Define some components
var Foo = Vue.extend({
    template: require('./components/test.vue')
});

var Bar = Vue.extend({
    template: '<p>This is bar!</p>'
});

// The router needs a root component to render.
// For demo purposes, we will just use an empty one
// because we are using the HTML as the app template.
var App = Vue.extend({})

// Create a router instance.
// You can pass in additional options here, but let's
// keep it simple for now.
var router = new VueRouter()

// Define some routes.
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

// Now we can start the app!
// The router will create an instance of App and mount to
// the element matching the selector #app.
router.start(App, '#app')

I also tested it with

Vue.component('Foo', {
    template: require('./components/test.vue')
})

In my test.vue i have

<template>

<h2>Test</h2>

</template>

But not as soon as i use require i get everytime the error Required is not defined in my dev tools.

What do i wrong here?

David K. Hess · Accepted Answer · 2015-08-23 14:53:53Z

2

require is a builtin in the NodeJS environment and used in Grunt build environments.

If you also want to use it in a browser environment you can integrate this version of it: http://requirejs.org

answered Aug 23, 2015 at 14:53

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

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

2 Comments

bobbybackblech Over a year ago

Yeah - thanks for your answer. I already figured it out because required and now i am using browserify.org

Quentin Over a year ago

Node.js's require comes from its CommonJS module support. RequireJS is a library for AMD modules. They are not compatible. They both provide a function named require but it takes different arguments and expects modules to be designed differently.

tony19 · Accepted Answer · 2022-07-15 02:01:11Z

1

(Author) This is outdated:

Use Browserify or Webpack as there is active support in the Vue community

http://vuejs.org/guide/application.html#Deploying_for_Production (dead link)

I personally used this repo of the Vue GitHub-org to get started quickly.

Edit:
This has moved on a bit in early 2018.

Deployment guide: https://v2.vuejs.org/v2/guide/deployment.html

'getting started' type repo: https://github.com/vuejs/vue-loader

edited Jul 15, 2022 at 2:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 2, 2015 at 12:54

eljefedelrodeodeljefe

6,8718 gold badges36 silver badges67 bronze badges

2 Comments

Robin Goupil Over a year ago

All the links are dead

eljefedelrodeodeljefe Over a year ago

Thanks for the pointer. Adding the outdated label.

Collectives™ on Stack Overflow

Vuejs - require is not defined

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related