What is Reddit's opinion of
Vuetify?
From 3.5 billion Reddit comments
99 reviews of this app found across Reddit:
They are incredible. I am using Vuetify right now and am making a ton of progress with my project in little time.
Keep in mind that a Vue component library is not just for saving you from writing a bunch of HTML. They also contain plenty of logic to make working with certain components easier.
Vue.js has various component libraries. My favorite is Vuetify, a complete Material design framework... the components takes some time to master, especially for someone who is not familiar with material design, but the official documentation is very helpful, with lots of practical examples for each component type. And they can be easily customized by playing the built-in attributes and classes, or adding custom CSS. The default look is Google's Material design, but you can style it, just like with normal HTML + CSS.
The Vuetify docs are generally quite good. https://vuetifyjs.com/en/components/avatars
​
In general though you will need to know some Vue basics. Mostly props, v-model and slots to get the most of Vuetify. If you don't know those concepts first I'd head over to the official Vue docs and make sure you understand the basics of Vue before trying Vuetify.
Just to add clarity - you hate not vuetify, but Material Design.
As it was crafted according to Material Design specifications (source: https://vuetifyjs.com/en/introduction/why-vuetify/ )
I am a back end developer primarily writing APIs in Go so I only have a limited exposure to the frameworks. That being said I really miss https://buefy.org but it still requires Vue 2.6 and same with https://vuetifyjs.com/en/ for different projects. Beyond that I actually find svelte easier for including legacy js code and frameworks. The latest version including Svelte Kit has what seems to me great typescript support.
Also I really wish the documentation was geared more towards non-node devopers and went into more detail of deploying static sites on S3 or comparable solutions.
Good news, the worker stuff I mentioned previously (cleaning up the DB access code as well as improving how filtering and sorting happens) is nearly done. If all goes well, I could release it on the next datamine update and then start working on the squad builder.
I experimented a bit with the using an alternative caching implementation to lessen the memory footprint (where I'd store cache less data and query more often); it showed some promise, where the Dictionary page (probably the most memory heavy page of the app due to how the current caching implementation works and the huge amount of string data) went from ~300-600MB of usage to ~150-300 MB of usage. However, I can't implement this in the current version due to how reliant some internal components are on the large cache. However, I do have plans for a v3 upgrade when both Vue 3.0 and Vuetify 2.0 release, which seem to be around the end of Q2 of 2019; this update would involve updating the project structure to be less memory intensive and optimizing where possible (I have ideas on how to get from page load to showing a unit/item/entry faster, but can't implement/test them in this version). I do still plan to develop features (like the squad builder) until those two are released, and to continue developing features after v3 is released. I don't plan on letting this project die yet.
On another note, I finally got this done. All that's left are weapons to max and LS spheres to craft.
Bro, use Vue CLI to create the Vue project, then use “vue add vuetify” command to add Vuetify to your project. Just it, work out of the box.
If you prefer to use Webpack or CDN, just take time to read the docs: https://vuetifyjs.com/en/getting-started/installation/
On your custom time picker component you can use Vuetify’s directive ‘v-click-outside’
The docs say you can provide a function with the directive that gets fired when clicking outside of the component you bind it to (your time picker). So you could try something like:
<TimePickerSelector v-click-outside="() => isOpen = false"
If you look at https://vuetifyjs.com/en/api/v-form/#component-pages you'll see that the v-form component has an @input event that can be listened to. The documentation shows that this returns the v-model of the form, which will represent its validity (when set up correctly).
So if you listen to that event, check the $event argument it sends is true, and then execute your submit logic.
Are you asking for it to close only when the user presses the button, or asking how to prevent the dialog from closing if the user clicks outside of it? I am presuming the latter here
Have you read the docs? I suspect the persistent option is what you want
Well, I use Qt for a desktop application. What I mean is using Qt + QML for UI.
Qt may certainly provide some nice functions for C++, but when you hit QML you lose the raw talent that went into React, Angular, and Vue. You lose all the libraries that each one of those has.
Take a look here and see just a fraction of the free frameworks and components that become available to you because of Electron: https://vuetifyjs.com/en/components/cards/#custom-actions
I understand the appeal of low level programming and sometimes its flexibility, but if your application is focused on UX above groundbreaking tech under the hood, Electron is probably the best thing for you.
You would typically find that information in the official documentation of the library, in this case here.
It's also quite possible that some customizations aren't built into the library itself and provided to you as props. In this case, you can still customize things on your own, but you'll have to learn about the underlying languages and technologies - HTML, CSS and JavaScript. I highly recommend investing some time into beginner tutorials covering those topics.
Last but not least, you should know that Vuetify is an implementation of Material Design, which isn't meant to be infinitely customizable. If your goal is to implement a very specific design, Vuetify is probably not a good starting point for that.
If I had to go to that drop down more than once to select multiple names, I would probably quit the application. I'm not really sure I would appreciate multi-select in a drop down either, and that's usually because you never know if that's a possibility. Personally, I would make one text input field that holds all the names that would get the broadcast. You could do autocomplete with a drop down to help fill in the contents. If there's uploading to be done, I would have a button out to the right. When the upload is complete, there's two options that I could see: (1) auto fill the input field with all users or (2) add the users to the stored list of all users, and allow the user to pick and choose from that - this could also be a radio/checkbox option near the button to pick between 1 and 2. For the third tab, I would just allow manual entry in the same input field.
Take a look at this example in vuetify that demonstrates the auto complete with chips.
I used VueJS with the Vuetify material-design UI framework. Half of my goal with this project was just to learn something new, and so far working with Vue and Vuetify has been fantastic.
Yes, the data files were from the APK itself. The game runs on Unity engine, so any Unity asset tool will do the job once you unzip the APK. I do know that updated data files are grabbed off the internet to the game on launch, but have not been able to incorporate these yet.
I've taken a similar approach to OP. A simpler web site can benefit from structured CSS and consistency across devices (and more) offered by Bootstrap, but when I start needing a lot of app-like functionality via plugins - for example, pop-up notifications, pickers, loading spinners - I use the excellent Vuetify framework https://vuetifyjs.com/en/
I don't know if it will fit your design aesthetics (it's based on material), but since you mentioned vue, vuetify has some pretty nice ones:
Very easy. As with any other framework. You start with the SASS/SCSS/Stylus includes and only use or overwrite what you want. Stuff will get overwritten and deduplicated anyway. You can also fall back to stuff like https://vuetifyjs.com/vuetify/a-la-carte or something like that. If you just want a simple grid even BS is total overkill. As I said, you already consider to use a GUI framework, it describes itself as "an open source toolkit for developing with HTML, CSS, and JS". I do not really care if you decide to voluntarily remove DOM handling (why would you though).
Why would you not use a GUI framework if you consider a a DOM framework as react, vuejs or angular? Stuff gets complicated enough with data binding, scoped CSS, bundeling, preloading and precaching. Why would you sit down and design an alert "again" if you can reuse a tested version of it that almost meets your design drafts?
As a python dev, I can attest that it may take well over a decade for everyone to move from version 2 to 3 after version 3 becomes "default" /s
Seriously though, A version of Vuetify supporting version 3 is currently in alpha. Beta should be coming out this month, and a release is slated for May.
I absolutely LOVE the vuetify docs.
It’s a UI component library so it mainly consists of docs for the various components like card, buttons and dialogs. What makes the docs excellent is that each component has an example page and an api page. The examples page has an overview of the component’s purpose and several interactive examples rendering it in different configurations like light/dark mode, each with the code example and a codepen link that you can use to tinker with an already working example and save for your own future use.
Then the api page exhaustively lists all the properties, slots, events, and ssas variables you can use to customize and configure the component. The docs also look and feel nice because they are built using the component lib itself and showcasing the nice UX of material design
I like Vuetify: https://vuetifyjs.com/en/
It is possible to buy themes in their store, but the framework is very straightforward even though the documentation lacks a bit.
Really if you understand grid and flex there isn't a lot you can't do by hand that a CSS framework is going to make easier.
The main benefits of a CSS framework, IMO, is have a few helper classes (such as padding and margin) that ensure consistent spacing throughout your elements. Tailwind is supposed to be good for that, though personally I don't use it.
It's also worth noting, if you're wanting your app to have a lot of interactivity, you may want to look into frontend framework and component library. Building some things from scratch (for example, a searchable autocomplete select box) is a pretty common component, and building it from scratch is going to take you quite a bit longer than say dropping in a vuetify autocomplete component.
Between those frameworks, Vue is probably the easiest to learn. If you just want something to look presentable, wrap your head around JS, and use some component library like Vuetify to make it look pretty with minimal effort
https://vuetifyjs.com/en/getting-started/installation/#nuxt-install
When you add the nuxt plugin for Vuetify, you get "treeshaking" by default (thanks to vuetify-loader, see https://github.com/nuxt-community/vuetify-module#treeshake). Note that this is only enabled in a production build. In dev-mode, the build will include every component.
<v-data-table
dense
:headers="headers"
:items="desserts"
item-key="name"
class="elevation-1"
></v-data-table>
Directly from: https://vuetifyjs.com/en/components/data-tables/#custom-filter
You can use the data specified in the script section.
Vuetify v3 in in alpha and is currently targeted to release February 2022:
https://vuetifyjs.com/en/introduction/roadmap/
https://next.vuetifyjs.com/
Depending on your situation and how close you are to needing a stable release, you might be able to get away with using v3-alpha for the time being and upgrading to 3.0 when it's release. Word of caution, there's definitely a chance breaking changes could be introduced during that time, but it at least would allow you to be working in Vue 3 and setting yourself up for the future.
How separate? A normal input with type <code>date</code> can almost certainly do the job.
Or, are you asking for certain specific frameworks like bootstrap-vue or vuetify?
Here is some documentation on that.
Perhaps I may misunderstand, but I believe you should be able to install vuetify as an npm package to your project and then vuetify-loader handles that for you.
A very quick check seems to show that they use Vuetify as their component framework. If that is the case then you need to look into Vuetify documentation for the tables.
https://preview.keenthemes.com/metronic/vue/demo3/#/vuetify/tables-data-tables
Vuetify https://vuetifyjs.com/en/
Tables Tables Tables Tables Tables !!
Look ,what all react libraries lacks are Tables....All of them one by one...angular too ..i've never seen a fully implemented CRUD table even in material UI. i hardly found a tutorial on youtube after tons of research on how to properly implement it with clean code and best practices for react .
the only library to ever implement CRUD tables is "Vuetify" and they have done an incredible job on doing so ...it gonna be awesome if you implement it .https://vuetifyjs.com/en/components/data-tables/#crud-actions
Sounds like the rules from other fields don't run when input changes in one field.
You can get ahead of the issue by using item-disabled prop of v-combobox and disabling the items from other selects if it's selected in one. You just need to assign the name of the key present in each object within somecomputedprop e.g. "selected"
Without the item-disabled prop, you should try these:
- Wrap the inputs and submit button in <v-form> and use v-model="valid"
- Validate form before the form is submitted. This will update valid from form v-model
- Add :disabled="!valid" to the submit button
If your items/options are preset, consider v-autocomplete to prevent custom user input.
Looking at the vuetify docs here it says that if you want to get the entire object in data.bar in this case, you have to add return-object prop to v-select. For the v-if scenario, could you add some more code so I can take a look? Just that v-if part to see your check and why it's not showing.
to install it correctly: in a new (empty) project folder you need to run a vue new [project name] you should get an option to chose your Vue version (2 works best) when its done cd [project] vue add vuetify and chose the recommended version. Maybe you already know that but just in case you didn't this could fix everything
​
Heres the official vuetify installation guide: https://vuetifyjs.com/en/getting-started/installation/
Vuetify has a component called Stepper that makes implementing something like that very straightforward: https://vuetifyjs.com/en/components/steppers/
For rapid prototyping and deployment, I use Firebase. Which is like a condensed, bespoke Google Cloud Platform, for app developers (web, iOS, Android).
This could be built entirely frontend-only using a framework like VueJS (or ReactJS). Then you can integrate the Firebase SDK on the client-side. Firebase, the platform, provides various services like Authentication, Realtime Databases, Storage, and hosting etc.
>Surely the tricky bit is the option to have them only able to delete entries they made
It's actually the simplest bit, relative to your skill. However, with Firebase, the database you could use (Firestore) has rules where you can specify who can delete, write, and read what. It ties in with their Authentication SDK. So even if on the frontend you weren't able to figure out how to hide/display a delete button based on the user, you can still block the request on the platform using rules.
Your frontend can connect directly with the Firebase platform, no backend required. Alternatively, you could run Firebase on the backend, like a Nodejs server, and use it as a middleman between your frontend and the Firebase platform. The only downside to this setup is it's very vendor-locked. If you wanted to move to another hosting provider it won't work.
For styling, my go-to is Vuetify, which is a Material style UI framework that plugs into VueJS.
That's just me, and it's all dependent on what you're trying to achieve. If it needed to be more complex then I'd offer a completely different solution.
It needs to be v-main, not v-content.
I'm on mobile, so can't test that fixes your issue, but it seems reasonable.
The Application section of the docs is underrated: https://vuetifyjs.com/en/components/application/
Unfortunately there's no width component on a v-autocomplete, so the best you could probably do is set the style to be a computed value, based on the items selected. Something like
<v-autocomplete :style="autocompleteStyle">
...
computed: {
autoCompleteStyle() {
return width: ${items.length*5}vw;
}
}
Obviously you'd adjust that equation to suit your needs. Not sure if this would work, but I've done similar stuff in the past.
EDIT: Another option is to use the grid system, but that doesn't always work properly when directly wrapping components.
I haven't done a whole lot with it. Just checking out the API: https://vuetifyjs.com/en/api/v-calendar/#slots
There are day and day-month slots. I messed with it a sec and I can put things on the cal that are not events.
I've taken this year off and a lot has changed. I need to get back into it because I'm almost broke. LOL
That’s just a small snippet of the entire app. This could be a number of things. I typically debug performance issues within a support call, there are often other underlying issues which exacerbate the problem.
If you’re able to give me access to the repo, I can take a quick peek: . For something more in depth, you can schedule time here: https://vuetifyjs.com/en/introduction/support/
https://vuetifyjs.com/en/api/v-combobox/#slots
Yes you can.
Just create the :item array with objects
{
text: string | number | object,
value: string | number | object,
disabled: boolean, <-- true
divider: boolean, header: string
}
Ahh, I think it is autocomplete component that I was looking for, extends the select component.
https://vuetifyjs.com/en/components/autocompletes/
Have a look into the treeview component of vuetify which is an css/component library for vue. They have a component which basically does what you want. Treeview component
You might have to transform your data source object into their scheme or vice versa.
> redirect to specific route every time the user logged in
Same way you always would, just redirect on the backend and Inertia will handle it.
> And finally is there any example for vuetify-loader
First, follow the instructions for using vuetify-loader here (skip the webpack part). Then, use vuetifyjs-mix-extension.
You can change the light and dark themes colors as option when you declare Vuetify.
You can find more information here: https://vuetifyjs.com/en/styles/colors/#javascript-color-pack
This is poorly documented on the docs (IMO). They key to this level of theming is to override Vuetify’s SASS variables: https://vuetifyjs.com/en/customization/sass-variables/
They don’t give you the complete list, but you can find it with some digging. Also check the colors page (linked from above).
I would say that it may be a bad idea to use JQuery with vue. Have you tried looking at other alternatives? Other libraries that you can use with vue? Not sure if you are using an UI component library, but if you want material design look and feel, I would recommend Vuetify. They have a slider component you can use: https://vuetifyjs.com/en/components/sliders/
Could you possibly use any old library you like and then perform event-listener based validation? i.e. on date select if it fails validation change the v-model value back to null and notify the user?
Vuetify's datepicker does allow you to specify "allowed dates" but even so personally I'd rather write some validation rules myself and implement them via an event listener (or \@change event or Vue watcher)
Edit: I've just spotted that you want a datetime picker not a datepicker. In which case I'd recommend this + "manual" validation as outlined above. https://github.com/darrenfang/vuetify-datetime-picker#readme
>https://vuetifyjs.com/en/components/date-pickers/
I'm trying to set the allowed date for range datepicker.
The first selection (dateFrom) should have the date today + the upcoming days as an available selection, the second selection (dateTo) should have the dateFrom + 1 day as an available selection. And I have an array of these dateFrom and dateTo.
I haven't tried this, but I don't think you need that function at all. Just set your date in the max prop as +1 day of your current value. https://vuetifyjs.com/en/components/date-pickers/ check the playground examples.
Cool site concept :D
Checkout this Vue.js component Framework. Could help when building out the site more, and getting a mobile friendly UI up and running quickly.
your use case is pretty trivial.
If you don't need a SPA, you could go for server-rendered templates. Php (laravel), .Net core, Java (spring) all have this pretty much build in.
if you want a SPA, NestJs + VueJs/Angular/React will fit your needs and allows you to use a single language for everything.
For your use case, I would probably go for a SPA with NestJs + VueJs and use Vuetify's dataTable component. If you have a lot of tables that have a lot of relations, then I probably would go for a Graphql API instead of a traditional RESTful API
but every combination of frontend framework and backend framework will do the job
I haven't tried to do much customization yet. There's info in the docs that makes it seem possible/easy though: https://vuetifyjs.com/en/customization/theme/
What other options are you looking at? Tailwind? Others?
I‘m no design expert, I just enjoy reading the material spec.... I can’t enlighten you with an app, but I used the Vuetify plugin for vue.js which follows the material design and it’s really fun to code with it
Not sure how far "custom components by providing high quality utilities" goes, but Vuetify is one of the bigger and cleaner component libraries for Vue.
But I wouldn't call it style agnostic since it's clearly Material design, but you can overwrite the styles without any issues.
You can use mapState to map state variables from Vuex to your indiviual components. So you could have a computed property named e.g. dispatchFinished which maps to a variable inside your Vuex state and then inside Vuex set it to false as the dispatch is received and then to true once it's finished.
I do something very similar with Vuetify's toast notification widget called by them a snackbar component:
I have a global snackbar component in my App.vue and its text and visibility state are mapped to my Vuex state. Then in the individual components where I need to notify the user of something via the snackbar, I will map the state to that component and then simply do this.snackBarVisible = true; this.snackBarMessage = "Something went wrong when signing up!"; to make user notifications easier and DRYed up.
Does that make sense? I've linked some docs to mapState above but shout me if you're still stuck :)
P.S. mapState is what I'd personally do, but as I mentioned (in the same sentence, somewhat confusingly I now realise) you could probably alternatively just return a promise from the action and in your component do something like:
this.storeDispatched = false;
this.$store.dispatch([MODULE_NAME, ACTION_UPDATE].join("/"), Object.assign({}, this.account)).then(() => {
this.storeDispatched = true
});
which might be simpler for this one use-case, but I prefer the mapState way.
P.P.S. If you are unsure by what I meant in saying "Can you set a disabled prop on the element..." just ask :)
What you are doing is exporting a new Vuetify object so the one you are making with Vue.use is ignored. Follow the docs pretty much exactly and it should do the trick.
I would consider vuetify. https://vuetifyjs.com/ It's a nice vuejs UI framework with calendar, datepicker, modal, ... components. You can load it only on the pages you need it and doesn't affect existing features that work with bootstrap.
A basic understanding of how vuejs and components work is necessary.
With Vuejs popularity growing, its ties to laravel and if you're getting paid on this project probably an ideal time to learn it.
Regarding styling issues, please follow the guide at https://vuetifyjs.com/en/getting-started/quick-start/. You may need to import styles in the main.js file, install vuetify properly, or install CSS into your index.html. If you have trouble with getting started, ask us a question in discord https://community.vuetifyjs.com
Most issues with Vuetify styling are due to not using the <v-app> tag at the base of your Vue app.
See https://vuetifyjs.com/en/components/application/ for more details.
You need to read about sass-variables, and inject them according to docs.
If you're using Nuxt I recommend you to use @nuxtjs/vuetify module.
A lot has changed in the last 2.5 years. There is a trend of people migrating from bootstrap to Tailwind (look at Laravel).
Bootstrap was so wonderful when it arrived not just because of its great default styles and pre-built components but the fact that it “solved” the biggest issue when building web pages - layout. Thanks to flexbox and grid, we don’t need their layout abstraction. Thanks to html5, npm, and react/Vue/angular/etc., their components are far less valuable. To top it off, their design simply feels dated.
If you are already familiar with bootstrap, great! Use BootstrapVue and stick to what works for you! But if you are new to all of this, I think there are far better alternatives in 2020.
And for the record, Vuetify has Saas variables and themes too. https://vuetifyjs.com/en/customization/sass-variables/
I have not used the rules for the stepper. The rules prop are the same verbiage as the text field rules so I believe they should work the same.
Wrap your inputs in a form within your step, on your form, v-model to a data object - lets say “valid”. Then you can call .validate() (say when you hit the ‘next’ button) on the form which will check for any fields with a rule, test the rule and if it fails, that field will display the error, plus the “valid” data object will turn to false. Linking the rules prop within the stepper to the “valid” data object will trigger that step to display an error.
I was going to create a code pen for this, but you cannot paste on mobile...boo!
I believe this should get you going.
Reach out if it does not work.
It is possible but not out of the box. I would recommend you check out the custom themes on the site. The free version of the material dashboard has some examples and the code is a available. https://vuetifyjs.com/en/themes/premium/
Checkout the Webpack install from here as well because it's similar and you might need some of the packages from here.
https://vuetifyjs.com/en/getting-started/quick-start/
So what you need is a webpack.config.js file with this:
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
plugins: [
new VuetifyLoaderPlugin(),
]
};
Your have to npm install vuetify-loader as well. Then in your webpack.mix.js file do this:
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
mix.webpackConfig(Object.assign(webpack))
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
And you should also have a vuetify.js file which should be imported in your app.js file or w/e name is your entry point:
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({});
Now in your main js file just do this and it should work:
import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');
I might have missed something but it wouldn't take much to fix it from here. I will try to make a boilerplate project for this for further use, unfortunately I don't have the project that I used it in at hand but I will try to find it when I get home.
This is already baked into vuetify.
https://vuetifyjs.com/en/customization/breakpoints
Ex: to make it xs on VP 600px > < 960px
<v-btn :x-small="$vuetify.breakpoint.smAndDown"></v-btn>
Basically I want a row automatically selected. i'm using the vuetify sample under the selected rows example https://vuetifyjs.com/en/components/data-tables , the main different is I used the
<template v-slot:item.data-table-select="{ item }"> <v-simple-checkbox v-model="item.default" @input="onDefaultChange(item)" ></v-simple-checkbox> </template>
to override the checkbox, this helped in setting the default row more properly but I have no idea how to really do this sort of thing efficiently, think of stores like amazon can save a card during checkout, i'm trying to replicate that behavior here.
Use a computed property to bind the calculated value to the prop and use breakpoints to determine the screen size
It wouldn't be a drop in solution. You'd need to modify the component template(s) to utilize vuetify's dom structure and classes. The amount of effort would depend on how complicated the component was.
Would a bunch of class directives work better for your situation?
You can easily use sass to loop and generate classes quickly. An example of padding using directives would be to check out vuetify spacing directives
You can apply classes to the component directly from the parent unless you explicitly tell vue not too allow it
Edit: depending how you are setting the padding dynamically you could just make one padding data property and use it as follows.
:class=“padding”
And the padding data property would just be a string of the directive classes.
Aloha, Thank your for your time, ill try to be as clear as possible, The first psychology irritating issue i am dealing with is, Im working on my portfolio website : https://official-rootz-website-94jjwlkbq.now.sh/ its mostly done for now. I used a vue cli + vuetify template to jumpstart me. In my recent projects section , on the left hand side where i have my images , i would like them to hover so users know they are clickable.... I have tried for two week straight and ask devs in the vuetify chat and no answer seems to work. here is the v-hover docs: https://vuetifyjs.com/en/components/hover#hover im not sure if your able to use your vue dev tools to examine the issue or if helps to looks at my git hub repo : https://github.com/CryptoRootz/Official-Rootz-Website i would like the images to hover and have a pointer so users know they can be clicked.... Thank you for your time and energy.
If I were you I’d focus on getting your mobile layout right and the copy reviewed. Some of the written English is janky and the mobile layout is what I’d consider broken.
That will help you stand out from other jr devs more then a couple images. :)
But an image grid will work https://vuetifyjs.com/en/components/grid-lists
Or a card containing info for each Lang / framework. (Each card would be in a column ofc) https://vuetifyjs.com/en/components/cards
https://vuetifyjs.com/en/customization/theme
I would have JS runs right before the custom theme initialization that checks the window.location.hostname and sets the color variables based on that value.
I don't particularly like the imperative nature of this (this.$toast) which really goes against the ethos of Vue. This would be better as a component controlled via a prop (and ideally v-model because this is a user interaction thing after all) because then I don't need to write a watcher to use it...
It also doesn't accept any slots making component composition much harder.
See here for a component example: https://vuetifyjs.com/en/components/snackbars
<v-snackbar v-model="snackbar" > {{ text }} <v-btn color="pink" text @click="snackbar = false" > Close </v-btn> </v-snackbar>
It's easy to let someone else do the design for you. For example, you can grab a free website template somewhere off the net that comes with a pre-built stylesheet and some example HTML. All you have to do is plug your own content into that template and it will look great
You can also use libraries to handle the design part for you, like Vuetify
imho VueJS + vuetifyjs
github theme-freelancer - Elementary, My Dear Watson
but theme free-blog -- Elementary, but requires learning vuex at least
imho => "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]
worth the effort
material-ui/pickers is a complementary project, so it means that it's another package you have to keep updated.
All my inputs were outlined but I had issues when using the outline variant on the date picker.
Still a good library though but when I see this kind of components: https://vuetifyjs.com/en/components/calendars I'm like, hmmm...
At the moment I'm using vuetify's progress-loader component for quick prototyping. It freezing the entire browser may be the issue, though it's a nested HTML plugin within an application and may have limitations.
Just to clarify, you mean that a single promise which contains processing for the entire list/batch would be fine? This might be a crossing of wires on my end because I'm used to "batch" as a term for the entire group, but the way you've written it above seems like it's referring to per entry within the batch. Sorry, a bit neckdeep in things and may be prone to misreading.
Have a look at expansion panels of Vuetify
https://vuetifyjs.com/en/components/expansion-panels
Really simple to use and I think will get the job done
I assume you're looking for some sort of auto-grid builder tool? Something that lets you select the columns, rows, padding, margin, etc? Unfortunately, I'm not aware of such a tool, but it would be a pretty nice tool for the community.
However, there is a (Layout Playground)[https://vuetifyjs.com/en/framework/grid#examples] on the Vuetify grid system page. I don't believe it covers all the settings, but might be a good place to start.
No the FAB style is a normal button but circle, the speed dial is a floating action button.
https://vuetifyjs.com/en/components/floating-action-buttons
Check the docs, there are a few positional props.
There is a lot going on here.
The spacing helper classes only go to 5. https://vuetifyjs.com/en/framework/spacing
You want to set the margin, not the padding.
There is a v-list-avatar for this expressed purpose. Use that instead of v-avatar.
Probably the fastest way to go from 0 to 60 with straight code is implementing Vue.js with a visual framework like https://bootstrap-vue.js.org/ or https://vuetifyjs.com/en/
If you don't have enough time to learn, you can probably reconfigure wordpress or some other low-code solution.
v-data-table is a Vuetify component; it sounds like you'd have more luck looking for help in the Vuetify Discord community or StackOverflow tag.
That being said, I think the <code>expand</code> slot is what you're looking for here.
I see two approaches:
Use the inline edit feature of the Vuetify datatable, and place the content you need in that <v-edit-dialog> slot that is provided.
Or, if you don't like the first solution, you can make the specific cells (in your case cell/columns containing date), be wrapped in a menu with an activator, where the whole cell would be the activator for the menu, so when you press the date cell, a menu with a vuetify datepicker component pops up.
That's all that comes to mind for now.
Make the axios call then set the data to the data field mapped to the table.
Data () { Return { items : [] } }
Method: Fetch() { Axios.get(‘/api/data’) .then(response => { this.items = response.data }
}
https://vuetifyjs.com/en/components/autocompletes#examples has an example in ‘search for public apis’ example.
I built my extension with Vue, so I used the Vuetify framework for all of my styling. If I didn't use Vuetify, I probably would have stuck with Bootstrap like I do most projects and build from there. I almost always build my extensions in Vue just for simplicity. Extensions can be treated as a SPA so most frameworks with built-in routing functionality for an SPA will work perfectly.
All that said - you aren't limited in any capacity. Just gauge how complex/simple your extension will be and build from there. Are you just building a quick settings page and maybe one more page? Then totally use vanilla and keep it simple. Needing to manage view states and process information in the popup? I would encourage you to use a framework just to speed up the process.
[https://vuetifyjs.com/en/](Vuetify) - based on flexbox, if you know bootstrap then you're good but yet another annoying framework to learn. Looks beautiful though, vuetiful even, material design. Can be a turd with Vuex.
We have a rebuilt contribution guide that is currently live on the site: https://vuetifyjs.com/en/getting-started/contributing . If something doesn't make sense, feel free to reach out to me in the community, https://community.vuetifyjs.com
I would recommend adding any of the typography classes to the <Td> element as you stated. Not sure why that would not would not. You could even dynamically apply the proper class based on your content.
https://vuetifyjs.com/en/style/typography
I did overwrite the font size with a custom class which works and ran into some formatting / spacing issues so I removed it.
Tables can have sortable columns, but the arrow is placed on the far end of the cell instead of next to the header. Also, it's quite ugly so I'd like to replace it.
On the other hand, for Vuetify there's a prop to replace sort icons.
I've used b-modal to replace window.alert and window.confirm but it's quite ugly. I'd like at least to hide the header and footers borders separators (the thin lines).
Again, Vuetify modal component looks much better, but overall I'd like Material to look less like a Google product.
Maybe you should use one of the built-in transitions Vuetify offers, just to see if it resolves the issue or not. https://vuetifyjs.com/en/motion/transitions
You can use front end frameworks that have built in features like that. My favourite is Vuetify, they have expansion panels. It's open source so if you don't want to use their features you can just use the code to see how they did it.
Best I've found so far is Vuetify and that's mainly because their data table is pretty solid. Generally, their components are really well built, but I don't think the material design spec works well with data heavy web apps.
Well yeah, there's Vuex (if I'm understanding what you're saying) which is a data store. But I'm talking more a component framework, like Vuetify but aimed specifically at presenting data/forms/information for data heavy applications.
Not really directly answering your question because I'm a beginner myself, but I thought about the same thing and I didn't know the frameworks you've linked!
Since I want something like this myself, I was thinking of using the Steppers or somehow make it work with the fullscreen dialog (Dialog #4) (i.e. have it go on (static) pages that look like the ones that I want to explain and add tooltips via CSS)
Would be more elegant and probably more flexible to use one of the frameworks you've mentioned, though.
It seems like you have a few examples. Another place I've seen slots used appropriately is with tabs. UI libraries, like Element, Vue Material, and Vuetify appear to use this approach. They use slots to define the child tab components as well as the content that belongs in there. I haven't dug a lot into any of the other libraries, but I imagine most folks come to the conclusion that it's easiest to use slots.
If you abstract that tabs use this approach, as well as modals, the slots come in handy when you are wrapping several components or elements and they are expected to vary.
Absolutely. To anyone reading, these frameworks can be used in any web project (React, Vue, Angular etc).
I'm a Vue fan so here is an alternative for people wanting a good Vue CSS Framework https://vuetifyjs.com/vuetify/quick-start
You can use :error-messages=['Error'] to display custom validation errors on v-text-fields. See example #16 on the docs.
For authentication, I've used router.beforeEach() to check a meta field and redirect if the user isn't authenticated. There is a basic example of how to do this on the route meta fields page on the vue-router docs.
How can I make this site/environment specific. Someone suggested NODE_ENV but I don't understand how.
I use this package to help setup the environment variables: https://www.npmjs.com/package/dotenv If you have confidential stuff in there, don't forget to add the .env file to your gitignore.
Your Vuex Store is a large part of the main.js file Look into vuex modules: https://vuex.vuejs.org/en/modules.html
// REDDIT The following "scroll" code is written on the top-level. Seems a bit like polluting the global name-space to me. Is there a better way to do this? I would probably put that in a created lifecycle hook in one of the components. But because you are listening to the scroll event, I don't think you'll escape that feeling of 'polluting' the global namespace.
I noticed you also had some questions about colors. Since you're using veutify, you should check out their docs on this topic: https://vuetifyjs.com/style/theme
Sorry, that's all I have time for right now.