require-vuejs

WebJar for require-vuejs

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-edgardleal-require-vuejs
Last Version

Last Version

1.0.7
Release Date

Release Date

Type

Type

jar
Description

Description

require-vuejs
WebJar for require-vuejs
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/edgardleal/require-vuejs

Download github-com-edgardleal-require-vuejs

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-edgardleal-require-vuejs/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-edgardleal-require-vuejs</artifactId>
    <version>1.0.7</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-edgardleal-require-vuejs/
implementation 'org.webjars.npm:github-com-edgardleal-require-vuejs:1.0.7'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-edgardleal-require-vuejs/
implementation ("org.webjars.npm:github-com-edgardleal-require-vuejs:1.0.7")
'org.webjars.npm:github-com-edgardleal-require-vuejs:jar:1.0.7'
<dependency org="org.webjars.npm" name="github-com-edgardleal-require-vuejs" rev="1.0.7">
  <artifact name="github-com-edgardleal-require-vuejs" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-edgardleal-require-vuejs', version='1.0.7')
)
libraryDependencies += "org.webjars.npm" % "github-com-edgardleal-require-vuejs" % "1.0.7"
[org.webjars.npm/github-com-edgardleal-require-vuejs "1.0.7"]

Dependencies

compile (3)

Group / Artifact Type Version
org.webjars.npm : requirejs jar [2.3.3,3)
org.webjars.npm : vue jar [2.3.4,3)
org.webjars.npm : vue-template-compiler jar [2.3.4,3)

Project Modules

There are no modules declared in this project.

require-vuejs

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

Codacy Badge Build Status codecov Code Climate

NPM

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

CDN

Development ( last version )

https://raw.githack.com/edgardleal/require-vuejs/master/dist/require-vuejs.js

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

https://raw.githack.com/edgardleal/require-vuejs/master/dist/require-vuejs.min.js

Installation from NPM repository

npm install require-vuejs

Usage

This example on Codepen

File structure

app.js
component.vue
index.html

Source code example

index.html

    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8" />
            <title>Require Vue</title>
        </head>
        <body>
            <div id="app">
                <my-component></my-component>
        </div>
            <script data-main="app" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js" ></script>
        </body>
    </html>

Create your component: ( component.vue )

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

Create your app code: ( app.js )

    requirejs.config({
        paths: {
            "Vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min",
            "vue": "https://rawgit.com/edgardleal/require-vue/master/dist/require-vuejs"
        },
        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": "https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/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

Contributing

CONTRIBUTING

License

MIT

Code of Conduct

https://js.foundation/conduct/

Versions

Version
1.0.7