I am working with Vuetify 3 (alpha.12) and can't find in official site -> Components information about tables and tabs. At the same time Vuetify 2 supported them. So the question, does Vuetify 3 support them?
The vuetify is still under development and there're many components which have not been supported yet like:
Data table
Tabs
Carousel
Form inputs
You could read the note in home page :
Before proceeding, it is important to note that this installation is intended primarily for testing purposes, and should not be considered for production applications.
Related
I am developing a Vue3 application with a component that renders a D3 chart.
The problem occurs when I navigate to another page and get back to the same D3 component but with different data. The D3 charts keep on getting stacked on each other.
I am using Vue3 and found it is a bit difficult to disable caching of components but perhaps I missed some options. I wouldn't mind disabling caching completely, because most of the data is obtained from localStorage, so pretty quick anyway
Here is a sandbox to illustrate the problem:
https://codesandbox.io/s/vue-3-vuex-4-vue-router-forked-eem3ui?file=/src/components/Miserables.vue
If you click on the "Miserables" link, then to another link (Playerlist or About) and back to Miserables, you'll see the charts stacked.
You have at least 2 "smells" in your code:
you are creating and injecting <script> tags every time your Miserables component is being mounted - after multiple mountings you will have a lot of duplicate JavaScript code, pontentially poluting the global namespace (multiple times) and worse - potentially attaching multiple event handlers or setting up timers;
on every mounting you are creating a new SVG and appending it to the BODY - so it's not Vue's fault that you're getting multiple SVGs on the page;
Long story short, I'm having some serious trouble getting themes to work in general - even for the "HelloWorld" base app that comes preinstalled with Vuetify. For some reason Vue/Vuetify do not apply any colors to anything unless I use the "color=" tag and even when I use "color=" it only uses the color I specify an not any shades or highlights of that color. When I change the theme from "light" to "dark" or vice versa nothing happens (again, I'm having the same issue with the "HelloWorld" app). I feel like I've gone through all the documentation for themes a hundred times and am looking for anyone to point me in the right direction. I should add that for one reason or another the theme IS working on a random v-list-group in the nav drawer but not to the items above or below the group. I'm using Vue 2 and Vuetify 2.
Things I've Tried
Making a new theme using the theme generator on the Vuetify website and inserting it into the ./src/plugins/vuetify.js file as instructed by the documentation.
Attempted inserting the theme at the bottom of ./src/App.vue between the <script> </script> elements. This worked for someone else but didn't do it for me.
Completely uninstalled and reinstalled Vue-CLI using the command line.
Completely deleted and recreated my project.
Remaking my project using Vue 3 and Vuetify 3. This does work but Vuetify 3 does not yet have the components I need for my project.
Will there be any future inconvenience/ compatibility errors if I just use Vuetify on only select components, and leave the others as is (made with vanilla html/js/css)?
I recently installed Vuetify on an existing project, and I'm not sure whether to recode the whole thing so I can integrate Vuetify into the whole project or just use it only on the components I will be making from now on.
There will be no inconvenience or any issues later on. You can use however much of Vuetify you wish for however much of your project you like.
The only downside I can think of is the visible difference between your own components and Vuetify components which will be apparent in the finished product. I would personally replace the old components with Vuetify in this case.
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!
I'm using the VueJS Vuetify framework and I need a pagination option with more features then the basic one available.
what am i looking for:
an option to add custom names (not just numbers)
a tooltip over the buttons
to disable/enable just some of the buttons
pagination - meaning: use next, previous and "..." if there are too many pages
if the pagination had a template option (slot) that would of been perfect.
now i am wondering how is the best why to get my goal. is there a way to add templates to vuetify? is there a different component that has this options on the pagination?
Read the api here In answer to your questions:
1+2+3 This is not supported in vuetify out of the box and therefore you may want to consider writing your own pagination tool or looking for a different package.
4. This can be set in the props as described in the docs above, see total-visible prop and length.