javascript - Browserify and Vue: uncaught reference error: Vue is not defined -
this first foray front-end development beyond basic jquery stuff, , i'm using vue.js along other packages browserify. main 'app.js' looks this:
window.$ = window.jquery = require('jquery'); require('bootstrap'); var moment = require('moment'); var fullcalendar = require('./vendor/fullcalendar.min.js'); var datetimepicker = require('./vendor/bootstrap-datetimepicker.min.js'); var select2 = require('./vendor/select2.min.js'); var vueresource = require('vue-resource'); var vue = require('vue'); require('./videos/show.js'); require('./home.js'); require('./search.js'); vue.use(vueresource); new vue({ el: '#search', data: { message: 'hello world!' }, }); ...
it works expected way, when try create new vue instance in file (in search.js, instance) can't it. 'uncaught reference error: vue not defined' in console. no problem using other required packages elsewhere - although don't understand why need import jquery way i'm doing it... won't work if do:
var $, jquery = require('jquery');
i'm sure basic , fundamental not understanding yet appreciated!
the problem having basics of using modules. in general, module should export behavior or property , require module , use it. example, wanted add hidden form on pages. this:
addsecrettoken.js
module.exports = function(form) { // code here add hidden input passed in form }
then somewhere else had form needed secret input, require it:
myform.js
var addsecrettoken = require('./addsecrettoken'); ... // code makes form addsecrettoken(myform); ...
obviously, @ point need code runs root module or page require root module. maybe have app.js
@ top , requires needs , runs app()
without exporting anything. makes sense. majority of modules shouldn't doing that.
any time need behavior, should make module , anywhere need behavior, require module. each module should require depends on -- shouldn't depend on global (sometimes jquery exception).
Comments
Post a Comment