I have a Vue Cli 3 generated web component/custom element that uses Vuetify. I have a parent/host Vue App that is also using Vuetify. When the custom element loads into the host app, I get a bunch of Type errors as shown in the screenshot. e.g. Type Error: Cannot read property theme of undefined.
This appears to be a Vuetify issue. What is the correct architecture for using Vuetify within a Vue CLi custom element and in its host application?
Currently, I have Vue.js script tag in parent, for use by the custom element. And Vue is imported into the Vue app, as normal. Script tag is there only because the custom element requires it. I have Vuetify included in both as well. The web component is using the vuetify plugin. And so is the host.
The web component runs perfectly fine on its own, and so does the host app. So, apparently there are conflicts.
Thanks!
Donnie
Resolved this myself. In short, you cannot use the Vuetify plugin and the al-a-cart. It only works if you include the full Vue and Vuetify inside the web component. Not optimal, but at least it is a workaround for this Vuetify bug.
import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
// import { VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider } from 'vuetify/lib';
export default {
/* components:{
VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider
} */
}
Related
I am trying to build a simple micro-frontend example using Vue3 and Module Federation but I have a collision problem.
I have the code here:
https://github.com/ghalex/mf-example
There are only two mf:
container (Vue3)
auth (Vue3)
The problem I have is that when I import the App.vue component:
// index.js - in container
import App from './components/App.vue'
// indexAuth.js - in auth
import App from './components/App.vue'
in the auth module and load the module in container the App.vue component is overwritten.
Is there any webpack settings am I missing to make sure each component is loaded separately ?
I found the problem, it is a webpack-dev-server v4 bug. I downgraded to v3 and everything works fine.
I have a base plugin that does some Vue prototyping like so:
import Vue from 'vue'
import mitt from "mitt"
Vue.prototype.emitter = mitt()
...
I have another plugin that needs to prefetch some data from a Laravel API and return it to this plugin so the results can be prototyped.
How can I access that other plugin from here to execute it?
Or how can I access app from Nuxt in this plugin without it being destructured in a function signature?
I'm happy to make the API call here in this plugin, but I don't see how to do that without access to app or $axios
I have an express server serving only one GET route and return the file 'public/app.html'
This app.html file load vue.js throw cdn
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
I don't want to have a big component!
How can I put every component in a different file?
What I tried:
I created a /public/components/InputName.vue vuejs component.
And inside public/app.html in <script> I added:
import InputName from './InputName'
But I have this error
import declarations may only appear at top level of a module
Check this GitHub Repo :
it explains how you can load a component from a server:
https://github.com/maoberlehner/distributed-vue-applications-loading-components-via-http
I used npm install to include a client-side only plugin called vue-gallery and followed the instructions to load it as client-side only plugin as stated on the Nuxtjs docs. The plugin works fine with one exception: if I press f5 on any route that imports the plugin, Nuxt throws a 'Invalid or unexpected token' error. This is the error that is always thrown as when you would define the plugin as both client and serverside. The same happens if you type the URL directly in the browser. It does not happen however when you use the apps links to navigate to the page.
Note that this is just an external component type plugin, not a ES6 plugin.
vue-gallery.js
import Vue from 'vue'
import VueGallery from 'vue-gallery'
Vue.component('vue-gallery', VueGallery)
nuxt.config.js
plugins: [
'~/plugins/axios',
{ src: '~/plugins/vue-gallery.js', mode: 'client' }
],
In my pages component simply doing import VueGallery from 'vue-gallery'
Anyway to resolve this?
In my pages component simply doing import VueGallery from 'vue-gallery'
Thats the reason. If u import it in your pages it will be imported on SSR and so it will error, if its not SSR compatible. Since you are adding it globally as component in your plugin you dont need to import it in your pages
Can someone help with explaining how I can use vue.js with asp.net core 2.1.
ideally i'd just like to hit f5 in visual studio 2017 and the website load.
i know ms previously had spa templates but they seem to have been abandoned. theres a starter template on github too but that is using .net core 2.0.
I am trying to use Vue.js with MVC Core 2.1 for a multi page application at the moment, and have found a working solution.
I see you mention SPA though, my answer will be for Multi page apps, but some of the ideas may apply.
My approach
I've created a main.js file in wwwroot/resources/js/ and a components subfolder within that directory - and also a layout folder in the components one.
In the main.js I create a Vue instance and attach it to #app root element in the HTML. In this js file, I also register most of the components globablly, unless they are only needed for specific components. My main.js looks something like this:
# wwwroot/resources/js/main.js
import Vue from 'vue';
import Axios from 'axios';
import BaseLayout from './components/layout/BaseLayout.vue';
window.axios = Axios;
Vue.component("base-layout", BaseLayout);
new Vue({
el: "#App"
});
In the _layout.cshtml file I have the following (relevant content):
# Views/Shared/_Layout.cshtml
<div id="App">
<base-layout>
#RenderBody()
</base-layout>
</div>
<script src="~/resources/js/bundle.js"></script>
If you are only interested in SPA - I would probably do something like:
# wwwroot/resources/js/main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: "#app",
render: (h) => h(App)
});
# wwwroot/resources/js/App.vue
<template>
<div id="app">
<-- Use other components here -->
</div>
</template>
<script>
export default {
name: "app",
data: function() {
return {
// What evs
}
}
}
</script>
VueJs (along with Angular and ReactJs) was available at one stage from the new project but was removed later on because of limited maintainers. However you can still create a VueJs app via command line. Run dotnet new -l to see the list of available dotnet templates.
if you don't see vuejs in the list, install the templates
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
Once you create the web app, and open it in the VS you should be able to run it like any other project, by hitting F5.
There are a few good resources online :
Asp.NETCore 2.1 Vue 2 Starter - by DevHelp.Online
Creating a VueJS (with TypeScript) SPA on ASP.Net Core 2.1
Second link mentions that vuejs template is still available via command line.
Also i found this series very informative, explains from setting up to deployment.
https://code-maze.com/net-core-series/
If you are building a multi-page application, you can take a look at this template as an example or starting point.
https://github.com/danijelh/aspnetcore-vue-typescript-template
If you're building an SPA, consider splitting your API from your UI and use Vue CLI 3 for the UI part.