how to create Vue pluggable components - vue.js

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.

Related

How to hide functional components (JSX) in vue devtools?

i'm currently using JSX for Vue component, but currently, the devtool would show a very ugly nested hashed functional component tree like this, is there any way to avoid this? As far as I know, Vue devtools doesn't provide us an option to hide these functional components, therefore this would be very annoying
I'm building a UI package for Form module, I want to use JSX for Vue because that would make contribution much easier when a lot of people from React.js can jump in and help.
My package: https://www.npmjs.com/package/formkl

Does 'individual component importing' practice of a UI framework makes Vue js app perform better?

In case of using UI frameworks (like Bootstrap-Vue, ElementUI or Vuetify, etc.) in our Vuejs application, it's possible to import entire UI framework components & stylesheets from node_modeules in the App.vue(or in the application entry point), or importing a particular ui component in particular Vue file/Component as needed.
The demonstration of these two approches looks like:
For scenerio 1
in App.vue
import BootstrapVue from 'bootstrap-vue'
For scenerio 2
in any particular .vue file
import {BContainer} from 'bootstrap-vue'
So,In case of the first option, does it make the application slower or less performing as all components from UI framework is loading for each route change? Also, its's loading some components that are not needed.
On the other hand, it's quite inconvenient to import each ui component in every .vue file.
So what is the best practice for small or large scale web applications?
Does the practice is same for other JS frameworks/Libraries link React or Angular?
Thanks in advance.
Scenario 1 – register all components globally
All components from the library will be available to use everywhere.
If you change or update the library and some of the component names have changed, you won't get any errors at build time.
Scenario 2 – pick-and-choose specific components locally
Gets annoying to have to import each component when you want to use it.
Only components that are actually used (imported) will be included in the bundle (if using webpack or something similar). Results in a smaller bundle size.
It is clearer to look at the template and know where each component comes from. If you have lots of globally-defined components then there is no clear link between a component and where it came from.
If you change or update the library and some of the component names have changed, you will get build errors due to missing modules.
So,In case of the first option, does it make the application slower or less performing as all components from UI framework is loading for each route change? Also, its's loading some components that are not needed.
It does make a difference when you are importing the entire package globally. Also it won't reload the package for every route change as you have the import inside App.vue. It will be done once when your app is loaded for the first time.
I found this article very helpful on how to optimize loading 3rd party components into vue app.
On the other hand, it's quite inconvenient to import each ui component in every .vue file.
End of the day it all comes to how much of tradeoff your development team is willing to make between optimizing the app and adding multiple lines of import code into individual components.

Nuxt - global components according to layout

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>

Dynamic component path in vuejs

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.

Differences between vue instance and vue component?

I'm new to vue js and have some questions when learning it.
I'm now a little confused about the relationship between its instance and component. As far as I learned, every app build by vue should only have one instance and one instance only, it can have as many components as you like if needed. But recently I've seen a demo, and in that demo it has more than one instance.
So my question is, is that ok to have multiple intances in one app( the demo code works fine, but is that the correct way)? What's the best practice to use instance and component in vue app?
It's ok to have two instances in the same project, however, you probably don't want to do that.
A good scenario is to have one main instance to control your app, specially if you are creating a Single Page Application (SPA). Then use as many components as you want.
Components are a great way to reuse code and keep it organized, and, with Vue.js, is very easy to communicate between your components and your "main" Vue instance.
It depends very much on your situation.
I work on a large web project which is not an SPA. We have a Vue instance for each "silo" of the application. We are slowly transitioning an older project from a mostly jQuery frontend so it's possible that as it evolves We'll be able to condense down to a single Vue instance but we're having no trouble with multiple instances. The ease of using Vue in existing projects was one of the biggest deciding factors in choosing it over another library such as react.
I have taken a different approach with green development, one instance and many components.
There are something in common, and some difference between Vue instance and Vue component.
From Vue docs:
all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options).
The root Vue instances accept properties like el, router, the Vue components cannot.
The data property in root Vue instances is an object, but in Vue components must be a function.
The design target is different:
A root Vue instance is a Vue application launcher, Vue component is an extension of the Vue instance.
Vue components can create elements to be reused in many places. This is Vue characteristic of componentization mainly reflect point.
Vue instance can associated with and manipulate an element which is already exist.
Vue component more suitable for create new element and reuse it at anywhere.
Think of a Vue Component as a blueprint or set of rules on how to create something that can be inserted into the DOM that the user can interact with.
So when you create a Vue file you are going to define exactly one component with a set of rules that tells Vue how to display stuff on the screen and tells a user how to interact with it.
On the other hand is a Vue instance, its an instance of a Vue component, it represents something that has been inserted into the DOM and is something that a user can interact with.
If you have a background in Object-Oriented Programming, think of a Vue Component as being like a class and a Vue instance as an instance of that class.
What has not been mentioned in previous answers that I will cover in regards to the difference between Vue instance and Vue component is how we define the data property that we are working with.
If we are working with a Vue instance, then we can define the data property as an object or a function that returns an object like so:
With a Vue Component that data property must be a function that returns an object.
So for example this is a Vue component:
export default {
name: "App",
components: {
SearchBar,
VideoList
},
And if we want to make use of data inside of that Vue component, we have to make a function that returns an object.
Vue components extends Vue instances
but Vue instances accept properties like el, router, the Vue components cannot.
best practice:
one Vue instance
many Vue component