How can I install an external package in Rollup in VueJS. I'm trying to install VuePortal, but I need to use Vue.use(PortalVue), but I don't where put it.
I tried with a package called rollup-plugin-auto-external, and I put it in:
plugins: [
...
autoExternal(),
...
],
Also I put into the externals's object, but nothing.
Thanks
You don't need a rollup plugin to use PortalVue.
Vue.use(PortalVue) should go in the entry point file, where you setup the root Vue instance (e.g., main.js, index.js, app.js, etc.).
For example:
// main.js
import Vue from 'vue'
import App from './App.vue'
import PortalVue from 'portal-vue'
Vue.use(PortalVue)
new Vue({
render: h => h(App)
}).$mount('#app')
Related
We are integrating Vue into an existing ASP.Net MVC Application
Below code (Vue 2 X)working fine in our .Net Application
new Vue({
el: '#component1',
render: h => h(App)
});
To convert Vue 2 X to Vue 3 X used command "vue add vue-next" , after executing command version changed but "npm run build" command giving error.
You can use the Vue 3 migration build to help with the upgrade. It shims most of the Vue 2 code, while emitting console warnings that help you identify what to migrate.
To enable it in your Vue CLI project (based on installation steps from the migration guide), and to fix the code you mentioned:
Update vue to 3.1, and install #vue/compat of the same version:
npm i -S #vue/compat#^3.1.4
npm i -S vue#^3.1.4
Setup an alias from vue to #vue/compat:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.resolve.alias.set('vue', '#vue/compat')
}
}
Update the app entry to the new global mounting API:
// import Vue from 'vue'
// import App from './App.vue'
// new Vue({ el: '#component1', render: h => h(App) });
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#component1')
'Im using chartkick inside a vuejs project, so I run the following command: npm install vue-chartkick chart.js, and then in the main.js I put the following instructions:
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
But I can't show the results of my web application when running the server is there any one who knows how to fix that here the code of the main.js
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
App.use(VueChartkick)
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
I tried to test this one:
<line-chart :data="{'2017-05-13': 2, '2017-05-14': 5}"></line-chart>
While working with Vue CLI 4.5.x, I tried the following code:
import Vue from "vue"
import App from './App.vue'
new Vue({
el: "#app",
render: h=> h(App)
})
But unfortunately, it gave the following warnings:
"export 'default' (imported as 'Vue') was not found in 'vue'
What I can conclude from this, is that Vue CLI 4.5.x has stopped this way of creating an application where you first create a Vue instance.
To initialize the main application, the official way is as follows:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
I'm not sure if my conclusion is correct or not. It would be a great help if somebody would concrete my conclusion, as so far I have not found any proof of that in official documentation of vue.
Moreover, the later code comes baked with Vue CLI 4.5.* application instance, while former code is true when using the CDN.
You've installed vue 3 using vue-cli 4 and this version has this new global api for creating new app :
import { createApp } from 'vue'
const app = createApp({})
You're still able to create apps using vue 2 based on vue cli 4 but you should indicate the version when you launch new project.
I have a CMS that delivers static HTML pages. For that CMS, I want to develop components with Vue that then can be used in the CMS individually.
As I understood, Vue is the perfect solution for that.
As TypeScript gets more and more common, I want to use TypeScript with Babel and Webpack, so the CLI project gave me a perfect boilerplate.
When I run npm run build, I get an index.html in the dist folder with my <div id="app"></div>-container. This could be my root element/template in CMS, and then just pass the components in it.
Sadly, everything in the app-container is rendered out.
I already registered my components inside the main.ts file, and removed the line render: (h)=>h(App), but it also replaces my container contents.
Main.ts:
import Vue from 'vue';
import App from './App.vue';
import ButtonLink from './components/ButtonLink.vue';
Vue.config.productionTip = false;
// Adding the component to my Vue context
Vue.component('ButtonLink', ButtonLink);
new Vue({
// render: (h) => h(App),
}).$mount('#app');
Excerpt of index.html in dist dir:
<div id=app>
<ButtonLink href="https://google.com">A link </ButtonLink>
</div>
Link to full project: https://gitlab.com/cedricwe/vue-problem/tree/master
What did I do wrong? Is this even possible?
It looks like you're using in-DOM templates without the runtime compiler, which would yield this browser console warning:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
The runtime compiler is excluded by default to reduce the bundle size. You could enable it in a Vue CLI project with the runtimeCompiler flag in vue.config.js in the root of your project:
module.exports = {
runtimeCompiler: true
}
What you really want to do is provide your Vue instance a "mounting point". In this case we normally use the el option something along the lines of this would work instead:
import Vue from 'vue';
import App from './App.vue';
import ButtonLink from './components/ButtonLink.vue';
Vue.config.productionTip = false;
new Vue({
el: '#app', // mounts this instance to #app but doesn't render it
components: {
ButtonLink // optionally have it local to your instance vs global
}
});
I created a very basic vue-plugin with some component that will be used in another project. The plugin code can be found here. The plugin works fine when tested independently.
In order to use this plugin in another project, I build the plug-in code with
vue-cli-service build --target lib --name testplugin ./src/index.js
This plugin will never be published to NPM registry and will be used only internally. So to test plugin module in another project, I run npm link on plugin dir and then npm link testplugin in another project.
Then I use it in another project like below -
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import router from '#/router'
import { testplugin } from 'testplugin'
Vue.config.productionTip = false
console.log(testplugin)
Vue.use(testplugin, { })
Vue.use(VueRouter)
new Vue({
router: router,
render: h => h(App),
}).$mount('#app')
The project compiles fine but testplugin is undefined. When I check node_modules directory, I can see my testplugin symlinked there.
I have tried diff approaches with no success. Any pointers would be helpful. Thanks.