I have a divided my vuejs application in to components and whenever i update the architecture of the application, I need to change the component path wherever added. This makes the application maintenance difficult. So I have added the component path to settings.json file and with that I am trying to load the component. But this is not working. Please see the code below.
import Registration from platform.urls.uiComponent+'Account/Registration'
Does any one have any idea how to set dynamic component path in vuejs ?
According to this answer it is not possible to do that. There is however an alternative way to achieve what you want to do if you use a tool such as webpack. In webpack configuration you can define an alias for a directory e.g. components, which you can use and afterwards change in a centralized location.
Related
Currently when importing components from another file to be used inside the template part, if the name of the component is not correct, Vue just gives a warning about this. Is there any way to configure it so that it errors during compilation or building, so that it is easier to do refactoring or moving around components, since in Nuxt, we can enable auto-discovery component, just that we need to include the directory it is in as well as part of the component name. For example, if I have a component named PhoneNumber inside base folder inside components folder, I can use that component directly by using BasePhoneNumber.
I have tried disabling the auto-discovery component in Nuxt, and I got a lot of this unknown custom element as expected. But this only triggers the warning, which I can only see the warning when I'm browsing that page. So there's a big chance of making a mistake where I update the name of the component in one page, but another one in another page is missed
I'm trying to create a form that I want to use modularly by linking to it from multiple page templates. Using just the straight vue-cli I would simply create a route to the file that has the form defined that I store in the "components" directory and then wrap a button linking to the form in a <router-link to="componentFormName"><btn></btn></router-link>. I'm having some difficulty determining how to do the equivalent in Nuxt. Any insights would be greatly appreciated. It seems the <NuxtLink></NuxtLink> only works with Vue files in the "Pages" directory.
You probably want to use dynamic components here: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
With something like this
<component :is="currentTabComponent"></component>
With currentTabComponent being one of the component to mount. You can mount a component depending of the current route with a relation between the URL and the component name too.
Also, Vue does not have any knowledge of "route", and everything is a component. Nothing really changes with a page because it is also a component at the end of the day. Or you could write one inside of it.
Maybe an example of your use-case would be helpful here.
I want to create an application with a plugin structure. I figured out that the best way would be compiling plugins as web components and then use them, but importing them not as global components appeared to be difficult. So, what is the best way to import and use external Vue component? I don't want to make component global, because I would like to unload plugins when the user turns them off.
I'm developing Nuxt universal application, where I have two layouts one for control panel and one for frond-end UI.
And the thing I need is to register global components, but I need them to be only global for specific layout, couse I dont want to download unnecesary scripts on my front-end app in its bundle.
Is there some way to do that?
According to docs global component's are registered on Vue prototype and will be accessible from any component within created Vue instance. That means, that as long you use single instance, all global registrations (components, filter, mixins, etc) will be shared.
So, the answer is that there is no easy way to do that, specially when Nuxt.js takes care of essential part of webpack configuration and route splitting.
Registering component's locally should be done, in order to optimize performance.
Another recommendation you might want to look at, is that even you optimize loading of components, application will still load all declared store modules, plugins, external libraries, etc. And the most important, from my experience, once automatic deployment has been setup for that application and some changes have to be deployed to control panel - whole site will have to go down for maintenance.
I would consider a good practice to separate front-end and control panel to their own apps, which keeps responsibility separated and is the only way to deliver best optimization to front-end part of application.
Control panel is usually available on a subdomain, but can be configured on the web server as a subfolder, e.g. domain.com/control-panel.
Two step can solve your problem:
make a global_component.js file into plugins directory
then add below code,
import Vue from 'vue'
import your_component from '../your component directory/your_component.vue'
Vue.component('your-component', your_component)
add this js file into Nuxt.config.js plugins block
plugins: ['#/plugins/global_component.js '],
now you can use your component into any template like below
<template>
<section class="container">
<your-component></your-component>
</section>
</template>
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS