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
Related
I have two SPA on vue, on same deployment area:
Uses Vuetify (www.someserver.com/portal_1/)
Uses Bootstrap-vue (www.someserver.com/portal_2/)
Now I need to make some portal area with components from both SPA. Is there any methodology to deal with it?
I try to create app with vuetify and bootsrtap-vue, but stuck with many sass errors...
I have struggled with the same issue regarding Vuetify styles. I needed to have a second Vue app embedded inside my Vuetify app but the Vuetify styles kept leaking inside the child Vue app, and the global styling coming from child app also broke Vuetify defaults.
I have done a long research and concluded that the options are:
-Rewrite the child app using BEM approach (Still Vuetify would leak with selectors like p, head, body etc.)
-Disable Vuetify's CSS reset file, remove globals and disable theming via hacky approaches.
-Use an iFrame container or web components approach on the second app to isolate it from the other.
Messing with Vuetify library didn't sound too great, because it will be too chaotic to deal with problems later on. We decided to completely isolate two Vue instances via an iFrame in the end, and I'd recommend the same thing if you REALLY need to use both bootstrap-vue and Vuetify, because they both have global CSS selector modifiers and stuff that will just create a huge mess.
I had my team do further research on iframes and how to consistently pass data between an iframe and parent app, here are the two options that you may consider:
vuex-iframe-sync (a lightweight option but I couldn't get it to work properly)
https://github.com/L-Chris/vuex-iframe-sync
Zoid (a library maintained by payPal, very solid approach but tricky to set up with Vue)
https://github.com/krakenjs/zoid
Further info on how to set up zoid with Vue:
https://github.com/krakenjs/zoid/issues/296
PostRobot (Haven't tried this one but also a solid option, probably much easier than zoid)
https://github.com/krakenjs/post-robot
Good luck, and please let me know if you find any other approach that works!
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.
Is there a tool to build documentation for vuejs components in a way similar to what Quasar or Vuetify do for their own components? ie: a browseable table with tabs corresponding to prop, slot, methods, events?
Is there anythis similar to what is Sphinx for Python, ie a tool that does introspection of the code to collect info to show?
Searching in google returned a lot of docuemntation ON veujes rather than how to document our vuejs code...
From my limited research, I've found this one: https://vuese.org. I haven't tried it though.
There are a lot of autocomplete components to VueJS on the internet, but none that I found fit to my project.
I need a autocomplete component with the requisits:
Able to use v-model;
The list is just a suggestion. The input is free to type;
The component is css customizable (I want to use a simple bootstrap design on it).
Can someone help me?
I am new to Vue.js, coming from AngularJS 1. Does anybody have tips on how to implement a loading screen such as PleaseWait?
I also created an example that integrated with PleaseWait.js
http://codepen.io/CodinCat/pen/ZeKxgK?editors=1010
Since PleaseWait.js manipulates real DOM directly, the code becomes a little bit tricky. I'd recommend to re-implement this library in Vue.js. Vue does have transitions: https://v2.vuejs.org/v2/guide/transitions.html
You can just create a component for it, and use v-if to hide/show it
<loading-screen v-if="isLoading"></loading-screen>
A very simple example: http://codepen.io/CodinCat/pen/MpmVMp