Is it possible to use vue extensions without browserify/vueify?

swift1 commented 9 years ago

Ok, here's the case: I'm trying to use routing functionality (like the one shown here: http://jsfiddle.net/koba04/WgSK9/1/ ). The problem is, this example only works with Vue.js v0.10.3 and browser.js 1.2.6.

Since the latest version of Vue, Vue.js v0.12.7, supports routing when using the plugin at https://github.com/vuejs/vue-router, I'm trying to rewrite the example from jsfiddle to work with the latest syntax for components.

However, since I'm not using browserify, the browser does not understand require statements etc, like: var Vue = require('vue') var Router = require('vue-router') Vue.use(Router)

So, is it possible to use extensions to Vue without using browserify or compiling anything? :)

PavelPolyakov commented 9 years ago

I think you should just connect the files like regular javascript. Meaning that you just need to get rid require and have <script src="*"></script> somewhere on your page.

The rest would remain the same.

swift1 commented 9 years ago

Thanks for the answer, but I was already doing what you're suggesting. I have some dead simple code but I can't figure out why the external library (for example vue-validator.min.js) doesn't work. Example:

//app.js:
new Vue({
  data: {
    name: '',
    email: ''
  }
}).$mount('#user-profile')

<!DOCTYPE html>
<html lang="en">
<body>
<form id="user-profile">
    name: <input type="text" v-model="name" v-validate="required"><br />{{validation.name.valid ? "yes" : "no"}}
    email: <input type="text" v-model="email" v-validate="email"><br />
    <input type="submit" value="send" v-if="valid && dirty">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
<script src="vue-validator.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Vue.js works but not the validation extension :disappointed: :camel: :dromedary_camel:

So I guess the real question is how to do:

Vue.use(validator)

without these three lines:

var Vue = require('vue')
var validator = require('vue-validator')
Vue.use(validator)

Any help would be appreciated. :sparkles:

EDIT: never mind, I figured it out. xrado/vue-validator works, but vuejs/vue-validator doesn't. So I'll just use the working one. :smile: :japanese_goblin:

swift1 commented 9 years ago

I finally figured out why the kazupon's vue-validator didn't work.

This code has to be inserted:

Vue.use(window['vue-validator']);

Now everything works. https://jsfiddle.net/q7xcbuxd/9/

vuejs / Discussion

Is it possible to use vue extensions without browserify/vueify? #256