Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including require-vuejs with all npm packages installed. Try it out:

var requireVuejs = require("require-vuejs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

require-vuejs v1.1.3

A RequireJS plugin to load and parse VueJS components ( .vue )


RequireJS plugin to async and dynamic load and parse .vue single file components

Codacy Badge Build Status codecov Code Climate


This library has only 4Kb ( minified ).

What this library can do

  • Real time integration
  • Don't need build to use
  • Used as RequireJS plugin
  • You can use syntax detection from your IDE
  • Suport for single file component
  • Work with or without extension
  • Support .html and .vue files
  • CSS inside component file

What this library can't do

  • Parse Jade and other templates
  • Scoped css


Development ( last version )

For production usage: ( Fast CDN, long age cache and minified )

Installation from NPM repository

npm install require-vuejs


This example on Codepen

File structure


Source code example


    <!DOCTYPE html>
        <meta charset="utf-8" />
            <title>Require Vue</title>
            <div id="app">
            <script data-main="app" src="" ></script>

Create your component: ( component.vue )

      define(["Vue"], function(Vue) {
          Vue.component("my-component", {
              template: template, // the variable template will be injected 
              data: function() {
                  return {"text": "Ok"};

Create your app code: ( app.js )

        paths: {
            "Vue": "",
            "vue": ""
        shim: {
            "Vue": {"exports": "Vue"}
    // to use component in your code with RequireJS: 
    // put a reference to your component file with or without extencion after 'vue!' 
    require(["Vue", "vue!component"], function(Vue){
        var app = new Vue({
            el: "#app"

Optimize ( r.js )

Create a build file to r.js. In this example we are using a file named build.js:

        baseUrl: ".",
        paths: {
            "Vue": "",
            "vue": "require-vuejs" // full path to require-vuejs library file 
        name: "app",
        out: "main-built.js"

After create the file build.js with your build configuration execute this command:

    r.js -o build.js





Code of Conduct

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free