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'
Related
I have the following structure of my app:
index.js
const app = require("./app")
exports.api = app(...)
app.js
//all the imports goes here
//and exporting the main function
module.exports = app => {...}
Now I need to bundle app.js with webpack but index.js must stay intact
The question is, after bundling the app.js, how can I require it's main function app from index.js?
After webpacking app.js I'm getting error in index.js that says "app is not a function" which makes sense since app.js content is now wrapped in webpack staff.
Any suggestions are much appreciated.
Your "app" bundle needs to be exported as a commonjs.
module.exports = {
//...
output: {
library: 'app',
libraryTarget: 'commonjs',
}
};
The return value of your entry point will be assigned to the exports object using the output.library value. As the name implies, this is used in CommonJS environments.
So, in your index.js you can require('./dist/bundle-name.js').
seems to be a hack, but I made it work by adding an intermediate file and adjusting app.js and index.js like below:
index.js
const app = require("./bundle").app //changed to named import
exports.api = app(...)
bundle.js //an intermediate file which is now an entry point for webpack
import app from "./app"
exports.app = app
app.js
//all the imports goes here
//and exporting the main function
export default app => {...} //changed to default export
If anyone has explanation on why it works this way and how to simplify it without adding that bundle.js file, you are very welcome to comment!
So in a vanilla vue.js skeleton project, there is a component called HelloWorld.
views/Home.vue is importing this component
<script>
// # is an alias to /src
import HelloWorld from "#/components/HelloWorld.vue";
export default {
name: "home",
components: {
HelloWorld
}
};
</script>
Again this is all in the skeleton project, I didn't change anything.
If I take this example and change HelloWorld to Hello (while also changing all references inside of views/Home.vue to Hello. I get the following error:
* #/components/Hello.vue in ../node_modules/babel-loader/lib??ref--12-0!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./views/Home.vue?vue&type=script&lang=js&
What am I missing here?
When I grep the project directory I am finding references to Hello World in node_modules directory, not sure what that is about
I have written some JS classes that I would like to import in the app.js/main.js file of my vue.js project so that I can instantiate them in the components. Right now I am having to import the same JS class in all the components where I need the class individually.
I've tried the import in the main.js file but the components don't recognize it.
in the main.js file, I am importing like as follows
import Permissions from './Permissions'
However, when I want to instantiate the Permissions class in my component like
data() {
permissions: new Permission({
some object properties...
})
}
the component doesn't know what Permissions is.
How do I let the component know what Permissions class is?
To do it in the vue way, you can create your own plugin or mixin. See detailed instructions here
So, you can create a permissions plugin in permissions-plugin.js
import Permissions from './Permissions'
const PermissionsPlugin = {
install(Vue, options) {
// This adds the $getPermissions method to all instances
Vue.prototype.$getPermissions = function(properties) {
return new Permission({
some object properties...
})
}
}
};
Then you have to tell vue to use your plugin:
import Vue from 'vue'
import PermissionsPlugin from './permissions-plugin.js'
import App from './App.vue'
// The plugin is loaded here.
Vue.use(PermissionsPlugin)
new Vue({
el: '#app',
render: h => h(App)
});
And lastly now from any component you should be able to use your function like:
this.$getPermissions(properties)
I want to bundle a couple of components that I wrote in Vue. To do
so I am using Rollup with an index.js file (the file which I call Rollup on) that looks like this:
import ComponentA from './components/ComponentA'
import ComponentB from './components/ComponentB'
var myMod = {
ComponentA: ComponentA,
ComponentB: ComponentB
}
window.myMod = myMod
that then gets bundled into main.js.
I can include my module now in an HTML page with a normal <script src="main.js"> tag.
From here I can now defined components that use my modules components e.g.
ComponentA = myMod.ComponentA
app = new Vue({
el: '#app',
components: { ComponentA },
// components: myMod, also works if I want to use all the components
template: ` ...<ComponentA/>...`
})
and, until recently, this was fine for me.
I was wondering I could now use my module of components in a single file vue component outside of my module (e.g. if I want to make a site with vue-cli-3).
e.g.
<template>...</template>
<script>
import myMod from 'main.js'
ComponentA = myMod.ComponentA
export default {
name: 'SFCInAnotherApp',
components: { ComponentA },
}
</script>
<style>...</style>
I have tried changing my index.js file to:
export default myMod
rather than window.myMod
however, now when I import my component, the module is undefined..
e.g.
<template>...</template>
<script>
import myMod from 'main.js'
console.log(myMod)
ComponentA = myMod.ComponentA
export default {
name: 'SFCInAnotherApp',
components: { ComponentA },
}
</script>
<style>...</style>
----> undefined
if I keep the window.myMod = myMod line, once the page renders (with errors from the apps trying to use myMod components), I can of course access myMod with no issue.
How do I use rollup to create a collection of components that I can then, from other vue projects, import via either:
import {componentA} from '<path-to-myMod>'
or
import myMod from '<file-with-my-mod>'
var ComponentA = myMod.ComponentA
In short:
Using Rollup, how should I in my index.js file import my Vue components and export my module so that I can use it as I currently do as well as import it into single file components?
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