I want to inject a script file to web pack but when run i have a error
Uncaught ReferenceError: Vue is not defined
HOw i can do it
In Main.js
import Vue from 'vue';
import nqt from './nqt.js';
//Vue.use(nqt)
In nqt.js
vm = new Vue();
console.log(vm);
Thank for read!
You are using es6 modules in your project. And to use any module inside another modules you need to first import it.
Add this line on top of your ./nqt.js
import Vue from 'vue';
Now if you want the vm defined in ./nqt.js to be used inside other modules, you need to export it here like this.
var vm = new Vue();
export default vm;
And then import it inside ./main.js
import vm from `./nqt.js`
In order to get how it works take a look at http://2ality.com/2014/09/es6-modules-final.html
Related
Is it possible to use a mixin imported from a VueJS plugin in one component?
I've created a plugin and when I import it I can access the mixin's functions from all my components.
Is there a way to make it available in only one component ? or all the plugin add global-level functionality to Vue by definition?
IMHO you should use create 2 things:
the plugin that imports the essentials globally
the mixin that needs to be imported in the components you want
example:
//main.js
import {MyPlugin} from 'my-library'
vue.use(MyPlugin)
in the component
//component.vue
import {MyMixin} from 'my-library'
export default {
mixins: [myMixin],
}
You can register a mixin either globally, either locally. If you don't register a mixin globally, it will be only available in components where it is locally registered. So, with local registration, you can make a mixin available in only specific components.
Registering globally: you just need to declare it in the main.js file
Nb: you don't need to register the mixin in components
Vue 2:
// main.js
import myMixin from './mixins/myMixin'
Vue.mixin(myMixin) // makes the plugin globally available
new Vue({
// ...
}).$mount('#app')
Vue 3:
// main.js
import myMixin from './mixins/myMixin'
const app = createApp(App)
app.mixin(myMixin) // makes the plugin globally available
app.mount('#app')
Registering locally: you do NOT declare it in the main.js file, and you register the mixin in the relevant components
// componentWithMixin.vue
import myMixins from "../mixins/myMixin"
export default {
// ...
mixins: [myMixins] // importing the mixin - without this line, the mixin can't be available
}
I need to export and import a plain js file to work keyboard navigation correctly.
I am following the example here,and using import and export pattern of ES5 but it is not linking one js file to another.
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html#
This is my codepen.io link
https://codepen.io/ankita-sharma-the-flexboxer/project/editor/DzdmBE
module.exports = PopupMenu;
var myModule = require('./popuplinks');
There are multiple ways of exporting and importing JavaScript modules, in the past, we were using CommonJS modules which are in a format you've presented, they can be used in following way.
// module.js
const myModule = "something"
module.exports = myModule
// And then if you want to import in another file, you're using following sentence.
const module = require("./module")
Actually we're using ES6-like imports, you can read about them at MDN, I'm attaching a small sample of ES6+ export.
// module.js
const myModule = "Something"
export { myModule }
// And then
import {myModule} from './module'
Actually you should read post that will resolve your issue
I am trying to import an npm package into a Vue component.
The package (JSPrintManager - here) is just a JavaScript file with no exports. Consequently, I cannot use:
import { JSPM } from "jsprintmanager"
I have also had no success with the following:
import JSPM from "jsprintmanager"
import * as JSPM from "../../node_modules/jsprintmanager/JSPrintManager"
import * as JSPM from "../../node_modules/jsprintmanager/JSPrintManager.js"
Am I barking up the wrong tree?
If there is no way to import an npm package that is not a module, is there another way to load the relevant JavaScript file (currently residing in my node-modules directory) into my component?
I am using the Vue CLI
jspm.plugin.js
import * from '../../node_modules/jsprintmanager/JSPrintManager';
export default {
install(Vue) {
Vue.prototype.$JSPM = window.JSPM
}
}
main.js
import Vue from 'vue'
import JSPM from './jspm.plugin';
Vue.use(JSPM);
In any of your components you can now access JSPM as this.$JSPM
If you want to use it outside of your components (say, in store) and you want it to be the same instance as the one Vue uses, export it from Vue, in main.js
const Instance = new Vue({
...whatever you have here..
}).$mount('#app');
export const { $JSPM } = Instance
Now you can import { $JSPM } from '#/main' anywhere.
That would be the Vue way. Now, in all fairness, the fact your import is run for the side effect of attaching something to the window object which you then inject into Vue is not very Vue-ish. So the quick and dirty way to do it would be, in your component:
import * from '../../node_modules/jsprintmanager/JSPrintManager';
export default {
data: () => ({
JSPM: null
}),
mounted() {
this.JSPM = window.JSPM;
// this.JSPM is available in any of your methods
// after mount, obviously
}
}
The main point of the above "simpler" method is that you have to make the assignment after the page finished loading and running the JSPM code (and window.JSPM has been populated).
Obviously, if you disover it sometimes fails (due to size, poor connection or poor hosting), you might want to check window.JSPM for truthiness and, if not there yet, call the assignment function again after in a few seconds until it succeeds or until it reaches the max number of tries you set for it.
I am trying to incorporate the Treant.js library in my Vue app in order to generate a tree diagram from a JSON data object. Here are my import statements in my main view...
import Vue from "vue"
import store from "../../store"
import { getWebSocket } from "../../services/util.js"
import '../../assets/css/Treant.css'
import '../../assets/scripts/raphael'
var Treant = require("../../assets/scripts/Treant")
and here is where I attempt to call the Treant constructor (this.localTrace.route is the JSON object) ...
var tree = new Treant(this.localTrace.route, function() {alert('Tree Loaded')})
When I try to launch the page, I receive an error that states "Treant is not a constructor", and the app fails to build the tree.
CONVERSELY
I attempted to import the library globally in my main.js file like so...
import "./assets/scripts/raphael"
import "./assets/scripts/Treant"
When I do it this way, Vue can make its way into the Treant.js code, but then gives me this error instead
this._R.setSize is not a function
at Tree.handleOverflow (Treant.js?e3b3:842)
at Tree.positionNodes (Treant.js?e3b3:768)
at Tree.positionTree (Treant.js?e3b3:512)
at new Treant (Treant.js?e3b3:2164)
Any thoughts on how to make this work?
It's been a long time and you probably found a solution, but just for other guys visiting this tread:
open your main.js Vue initialization file and add:
import Raphael from "raphael"
window.Raphael = Raphael
Now Treant will be able to use Raphael correctly.
I have a completed Vue app that I am trying to 'build' and then trying to use in another app as an import.
In main.js
export function appInit(options = {}){
new Vue({
render: h => h(App),
store,
router
}).$mount('#app')
}
I also tried
export default function appInit(....)
I then build the project using a vue.config.js file using this command.
vue-cli-service build --target lib --name myApp
This generates a /dist folder with
myApp.common.js
myApp.common.js.map
myApp.umd.js
myApp.umd.js.map
myApp.umd.min.js
myApp.umd.min.js.map
I have tried the common.js file and the umd.min.js file in another app and imported them like this.
import MyApp from './js/myApp.common.js'
//or
import MyApp from './js/myApp.umd.min.js'
//or
import MyApp from './js/myApp.common'
//or
import MyApp from './js/myApp.umd.min'
Then underneath I call.
MyApp.appInit()
I even tried
MyApp()
In every case, this is the error..
"export 'appInit' was not found in './js/myApp.common.js'
or in any other of the files I tried.
Furthermore, I searched myApp.common.js and myApp.umd.min.js looking for the string 'appInit'. After all, that IS the function name I need to call. It does not exist in either file. Of course.
Is that the problem, that named exports do not work on obfuscated files? What am I missing here?
I have even tried this..
I created var with just the Vue object
var MyApp = new Vue({
render: h => h(App),
store,
router
})
Then an export function that returns it
export function appInit(){
return MyApp
}
In my test app I am importing the common.js build file with:
import appInit from './js/myApp.common'
Then I did
appInit.$mount('#app')
appInit should be the function I exported.
export 'default' (imported as 'appInit') was not found in './js/myApp.comm
on'