It is reused everywhere. Can be explicitly configured by: @Scope (ConfigurableBeanFactory.SCOPE_SINGLETON) Can be configured via the annotation: @Scope (ConfigurableBeanFactory.SCOPE_PROTOTYPE) Only one instance is created. The v-content component must be a direct descendant of v-app. Choose a preset: (Use arrow keys) Default (recommended) Prototype (rapid development) Configure (advanced) We will select the “Default (recommended)” option for this install. Features include sorting, searching, pagination, content-editing, and row selection. Here is a guide from Vuetify documentation for Vuetify with Webpack installation. This means that every component and prop name you learn will be easy to remember and re-use without frequently checking the documentation. Unless you really need this, there is no need to create an additional overhead and I recommend you using the CLI method. I'm writing a Vue.js application using ts and Vuetify. Material design provides features such as grid-based layout, effects for buttons and cards, various transitions, and so on. The grid supports 5 media breakpoints targeting specific screen sizes or orientations. Vuetify utilizes Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4. # Usage The standard data-table will by default render your data as simple rows. From the picture above, you can see that the latest version is 2.1.10. This fixes styles not being loaded when doing SSR (for example when using @nuxtjs/vuetify). Too much heavy decoration in default look. At this point, I will assume you already have a Vue project created with CLI. I want to use a different tone of color for dark and light theme in my theme-able application. It is a project that is backed by sponsors and volunteers from the Vue community. The v-data-table component is used for displaying tabular data. Vuetify can help you save time and money by using a highly researched frontend design. # API . # Data tables . It is used to determine grid breakpoints for the layout. That’s all you might need. After all, functionality is more important than design when building a prototype. The Material Design philosophy is to support consistency across different platforms. To make the text white again, you can re-add the dark prop, or you can simply do this: The text font color has changed to white, but the button component color has remain unchanged. It is heavy. If you are new to grids, you can check out our article, Introduction to CSS Grid Layout Modules. And engineered so you can build beautiful, usable products faster.”. As Vuetify imports styles with JS, without this option, they do not get picked up by SSR. In the next step I can recommend the following settings. If you did this, then you should have some files in the views folder. The project is supported by a vibrant Discord community forum where you can ask JavaScript questions — even if they’re not about Vuetify. So you can be confident that when you start using Vuetify in your projects, you won’t be left hanging without support in the future. Vue CLI 3.0 installed on your machine. # Default. If nothing happens, download the GitHub extension for Visual Studio and try again. Adding Instance Properties Base Example. If you prefer, you might also install Vuetify with Vue UI. Older browsers such as IE11 and Safari 9 can work too but will require babel-polyfill. To specify the font color, you need to append --text to the color name. Sometimes the best choice is to choose a library like the Material design or Bootstrap or Bulma. It’s completely up to you what library or framework you will use for the UI. Cons of Bootstrap. One of my personal issues with Material Design specifications is that often, I feel like I'm using mountains to present molehill-sized information. If you are using function components in your regular development, you may want to make some small changes to allow … If you remove the app prop, the toolbar will scroll away with the rest of the page. Tools & Services Compare Tools Search Browse Tool Alternatives Browse Tool Categories Submit A Tool Approve Tools Stories & Blog. Cons of Vuetify. Does that mean Material design is used only for developing Android applications? Hence you will find that you don’t need to use the router-link component. One of the most common features is to have the hidden sidebar to show it when the user presses a button or makes an action, to add a sidebar we have the component vs-sidebar. If you want to change the text color, add text-- in front of the lighten or darken attributes — e.g. And in the previous sentence, I already mentioned the reason why Vuetify is popular – it is great for prototyping. There’s a live demo of v-layout that’ll help you understand how it can be used. Please note am not pulling these props and values from thin air. This simply tells the toolbar to stick to the top when the user starts scrolling down. 94 commits ... set these up to be added like normal vue components yet │ CrudTable.vue # this is the default unedited template for the crud table with the pop up edit box │ InlineEditTable.vue # this is the … Contribute to ClintOxx/vuetify-admin-dashboard development by creating an account on GitHub. If you have never used Vue.js to build applications, please check out these articles: Vuetify is an open source MIT project for building user interfaces for web and mobile applications. The project was initially inspired by Vuetify, but comes at much lower price. Editor value is updated. Vuetify is a pretty popular Vue component framework. TIP. 9. More information on changing global components can be found on the customizing icons page. Here's an example configuration for launching Firefox navigated to the local file index.htmlin the root directory of your project: You may want (or need) to debug your application running on a Webserver (especially if it interactswith server-side components like Webservices). Vuetify uses a 12 point grid system to lay out an application’s content. Feel free to use any color that is not white or red — try orange, blue, green, etc. You can also use Vue UI to install Vuetify in your project. Notice there are so many props we haven’t tried out, such as: Feel free to have fun with them all. It aims to provide clean, semantic and reusable components that make building your application a breeze. You can find out this by executing npm info vuetify: As a result, you will get the information about current versions, maintainers of the project, packed size, and some technical details. According to the makers of Material Design: “Material Design isn’t a single style. Update the code as follows: The text is much more legible now. Just update your code as follows: Your browser page should update as follows: The dark prop simply changes the background to black and the text to white. Now all you need to do is to hit npm install –save vuetify@2.1.10 in your terminal. What is the reason for this? You don’t have to spend a lot time creating your own design language. $ laravel new vuetify $ cd vuetify Boostrap your Laravel app configuring the common initial steps like database configuration, migrations, running a php server. Vuetify Confirm Dialog component that can be used locally or globally - Confirm.vue ... download the GitHub extension for Visual Studio and try again. 16. Vuetify supports all major browsers out of the box. And in order to use the latest and greatest version, you will have to update your installation. Below is a simplified version of the code: The v-container component simply centers your content in the middle of the screen. The language survived since then and now it is being used by the majority of the Google-owned applications. Here is the documentation for v-toolbar. Vuetify is a component framework for Vue.js 2. Display sizes can be either 1024 (the default used when providing true) or 1000. And with the second way, the node package manager is used. Let’s break down the Vuetify code, starting with this component: The v-app component is a mandatory wrapper required for your application to work properly. Because Vue itself mainly focuses on the application logic and data manipulation, there is a need for some kind of framework to style your app. Vuetify is built to be semantic. Javascript is tied to jquery. Especially, if you like front-end development more than designing (and you find thinking about how your app should look like is a headache for you). I hope I now have your attention with that powerful statement. Create the file components/Login.vue and copy the following code: I’ve used the following components to build the login screen: Do take a look at each component’s documentation to see what else you can customize about them. , Getting up and Running with the Vue.js 2.0 Framework. It might sound like yet another CSS framework that is used by the developers, but in the reality, it is more than this. For this, you enter the following command and select “Configure (advanced)”: vue add vuetify. There is a steady increase in downloads for both libraries. But if you are building a prototype or your project is not a world-class product, Vuetify is a great choice. Here’s how the app should look like in full desktop view: When you resize the browser, the app should switch to the mobile view. It’s built using the CSS Flexbox Layout Module, which is a system for distributing items in a responsive layout structure without using floats or positions. Does it is being used only by Google for its projects only? After all, functionality is more important than design when building a prototype. After the installation, you will have the newest version of the Vuetify. Replace the code in App.vue with the following: I’ve put comments in the code so that you can follow along. And for the desktop applications, it doesn’t look good as it makes them look like mobile programs. Add content to the router file. This guide is written for developers who have intermediate or advanced knowledge of Vue.js. In this article, you will learn how to build an attractive and interactive frontend quickly using Vuetify. Your email address will not be published. Most open-source frontend libraries don’t get this level of attention. Let’s use another prop called color: As expected, your browser page should update as follows: Remove the dark prop and see what happens: So what just happened? It aims to provide clean, semantic and reusable components that make building your application a breeze. There are many frameworks based on it. Below are links to documentations for some of the components we’ve just used: In case you haven’t noticed, Vuetify automatically added a link to Material Icons in index.html. Another great way to design your project is Material design. I know that data tables are spec, and they look wonderful, but there are some cases where I really don't want an entire Excel workbook of display functionality for my data.And, that, thankfully, is where Vuetify steps in. Material Design is a popular system that has been implemented in every Android device that doesn’t come with a custom skin installed. One of the biggest arguments of Material design haters is that the design fits only mobile apps. 9. Vuetify. Vuetify utilizes Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4. We won’t go into detail on the Vuetify grid — it’s a topic that deserves its own article. Each level increases the darkness. Go back. It aims to provide clean, semantic and reusable components that make building your application a breeze. A number of Vuetify components can act as route links by simply specifying the to prop. 13. Component Events editorWillMount. Vuetify is a component framework for Vue.js 2. I have used it and and it does really make building components easier than just using traditional CSS frameworks. Vuetify utilizes Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4. It can exist anywhere inside the , but must be a parent of all Vuetify components. It might was used for Android only at first, but not nowadays. The process is similar to app creation with Vue CLI. Save my name, email, and website in this browser for the next time I comment. Every site uses the defaults. Building a friendly application interface with a great user experience is a skill that requires practice and knowledge. JavaScript is often described as a prototype-based language — to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from. The first prop you’ll come across is app. v-btn is the only component that behaves differently when using the dark prop. This is what you should see after running project and visiting it in your localhost address (if you want to access it externally, here is a tutorial): After vue add vuetify was used, there were some things that happened under the hood. The next component that we will discuss is v-toolbar. Links. Normally components use the dark prop to denote that they have a dark colored background and need their text to be white. Vuetify does provide a theme generator to help you pick a set of colors for your theme. v-layout is used to group content and align it. Instead of using the prop color, you can also use class and it will give you the same result. There may be data/utilities you’d like to use in many components, but you don’t want to pollute the global scope.In these cases, you can make them available to each Vue instance by defining them on the prototype: The website you're viewing is only a fraction of both JS (670 vs 40 Kb) and CSS (110 vs 10 Kb) payloads of even the most basic Vuetify example layout) , and of course has dark mode. This will help in drastically lowering your build size. As we know, for every good library (design language, in this case), there is an implementation for Vue.js. If you have previous experience using other CSS frameworks such as Bootstrap, you’ll find Vuetify very easy to use. We also have accent-1 to accent-4 which seems to control saturation. editorDidMount. The displayed size of the selected file(s) can be configured with the show-size property. So the Vue-material has over 8.3k stars on GitHub, while, Vuetify has over 23k. Required fields are marked *. The v-flex component is basically a box of content that can occupy one or more columns. In case you need an external link or normal html, simply do it with the href property. As a Vue.js developer, there are many fully-featured CSS frameworks specifically developed for Vue that you can take advantage of. However, the current version will be the newest only for now, but it will depreciate after a while. Confirm that the file router.js exists and has been set up correctly. In Vuetify, the v-app component and the app prop on components like v-navigation-drawer, v-app-bar, v-footer and more, help bootstrap your application with the proper sizing around component. Your home page should now display the following: Now that you’ve come to the end of this introductory article, you should know that we’ve only scratched the surface. Type: Boolean Default: false. I write clean, readable and modular code. We can further add more props to customize the appearance of our toolbar. During installation, there is an option for installing the router package. All of them have their own advantages and disadvantages, but they are still being loved and hated. If you have never used Vue.js to build applications, please check out these articles: 1. Master complex transitions, transformations and animations in CSS! In fact, you’ll find that Vuetify has a many more useful features and components than most popular CSS frameworks. Let’s quickly dive in and look at how you can get started. Here is the documentation for Vuetify colors. This is about every framework – they have their own fans and own haters. That’s it, you will have the newest Vuetify version after this. While searching for a Material design implementation for Vue.js, you might come across two different libraries – Vue material and Vuetify. Vuetify is a component framework for Vue.js 2. You can achieve this with vue ui in your terminal: Just go to dependencies and search for Vuetify. v-date-picker # Caveats . You can place icons, menus and other items inside it. It would be smart to check if the installaton succeded, wouldn’t it? And in short words, it means that Vuetify is an implementation of the Material Design guidelines. There are few different approaches for the installation, it doesn’t matter which one you will use. Vuetify is a component framework for Vue.js 2. Cons of Vuetify. registerStylesSSR. However, Vuetify has better documentation, more examples and it is easier to use than Vue material. Vue material vs Vuetify. While Vuetify won’t make you a skilled UX practitioner overnight, it will help provide a solid start to those who are new in this area. Check out the documentation for spacing to understand how it works in Vuetify. For a practical demonstration, head over to components/HelloWorld.vue and take a look at the file. In this article you will learn about how to use Material Design with Vue.js and you will find out about the Vue js Material design implementation, but before this, let’s overview what is Material design and where it is being used. Vuetify. Let’s finish up by building a LoginForm component in the next section. Params: editor: IStandaloneCodeEditor for normal editor, IStandaloneDiffEditor for diff editor. A new instance is created everytime the bean is requested. And the design language means that it describes some kind of guidelines and best practices for the applications. # Show size . Verbose styles. The main difference is that Vuetify was imported from the local directory, and it was used when creating an instance of Vue: So basically there it is, now you can edit code inside your .vue file and use any of the Material design components. Material design is widely adopted by many developers. First of all, you have to know what is the newest version that is published. Version 2.x of Vuetify will utilize Material Design Spec v2 which will soon be made available. There are also weekly patches to fix issues that the community raises. Get practical advice to start your career in programming! Already mentioned that Vuetify is a component framework. Getting Started with Vue.js — a quick primer 3. If the text has more than 5 letters, only the first letter will be shown as in the second avatar, the name is Luis Daniel and only the letters LD will be shown if the word contains spaces the initial of each one is added. Anything older than that is not supported. Grid system break points aren't ideal. One thing you’ll come to realize with Vuetify is that you will hardly need to write any CSS code to customize the appearance of your app. Here are a few things you should already have before going through this tutorial: 1. I love learning new technologies that bring efficiencies and increased productivity to my workflow. Material design for Vue.js is gaining popularity. One of the disadvantages of the libraries might be template’ ish design, but if you are building a prototype, that does not create a problem. A code editor — I highly recommend Visual Studio Code 3. Go to your project folder and install the package: Another approach also can be used – npm install vuetify, however in this case you need to have Webpack. Simply visit the Vuetify documentation and you’ll find what you are looking for. Called when the editor is mounted. Please note that majority of Vuetify components share the same props such as color. While searching for a Material design implementation for Vue.js, you might come across two different libraries ... export default { name: 'App', components: { HelloWorld, }, data: => ({ // }), }; ... but if you are building a prototype, that does not create a problem. I hope the installiation went well, if so, let’s move on. And if it finds the library, it lists it to the terminal. Did I answer the question? Add Vuetify to the project (optional) This step is optional if you want to use Vuetify for the material design components. It’s an adaptable design system inspired by paper and ink. Vue’s latest version, installed globally on your machine 4. This is how you can check what version of Vuetify is installed. By default they are emitting input event when the day (for date picker) or month (for month picker), but with reactive prop they can update the model even after clicking year/month. The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps.. Function Components . Do not bother memorizing names of props or classes. Vuetify also comes with free/premium themes and pre-made layouts you can use to quickly theme your application. First of all, Vuetify was installed, and secondly, App.vue, and main.js files were edited. You can verify whether you do by running the command below in your terminal/command prompt:node -v 2. While popularity is not the best indicator of quality, it still says something. Vuetify was built with vue-router in mind. While this will work for v-btn, it is advised to only use the prop when the button IS ON a colored background due to the disabled state blending in with white backgrounds. # Validation . Nuxt.js example – why does the Vue needs a framework? You can start accessing Material Icons right away. text--lighten-3. It aims to provide clean, semantic and reusable components that make building your application a breeze. # Application . Write powerful, clean and maintainable JavaScript.RRP $11.95. An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on. 22. Currently, Vuetify is the most complete user interface component library for Vue applications that follows the Google Material Design specs. And here is a downloads comparison between Vue material and Vuetify, according to npmtrends.com: We can make two conclusions from this chart: If you are convinced and you decided to use this library, let’s see how can we install Vuetify. The v-app component is REQUIRED for all applications. However, it takes a lot of time and resources to create your own design for every component. However, for simplicity, I have left the code duplication intact so that you can understand the structure of Vuetify components easily. Node.js version 10.x and above installed. Company API Careers Our Stack … You will be similarly asked questions if you want to install additional dependencies. The v-file-input has a default prepend-icon that can be set on the component or adjusted globally. Just follow these steps: When asked for a preset, just choose Default, which represents the a la carte system. Let’s do something cool in the next step. Without a doubt, there are a lot of alternatives for Vuetify. To add an internal text value such as Luis use thetext property. As rule of thumb, any color you specify on its own becomes the background color. Prototype bean: Default Spring bean type. One great example is Bootstrap-Vue. The term ‘tns’ is not recognized as the name error. However, no one will argue that Material design and it’s implementation for Vue.js, Vuetify, is a great choice. Of course, this is subjective and others might mitigate using the same guidelines for all platforms as it makes the design look clean. See what they do. Register Vuetify styles in vue-style-loader. The language was introduced on 2014-06-25, during the Google I/O conference. Vuetify comes with a premade v-snackbar UI component, ... /Snackbar.vue that displays a message and has a boolean show that controls its visibility: Now you can add it to your default.vue. You can add the prop dark or color="white--text to the button component to make it white. If you already have an existing Vue project that was created with an older version of Vue CLI tool or some other way, you can simply install Vuetify as follows: Update your index.js or main.js and include the following code: You’ll also need to install Material Icons, which you can include as a link tag in your index.html file: If you are starting a new project, installing Vuetify is very easy. Use GraphicsMagic instead of ImageMagick. Next update views/Home.vue as follows: If you are wondering what the class mt-5 means, it simply adds a margin-top of 48px. Guided through configuration with the second way, the toolbar code as follows: v-container! When asked for a Material design: “Material design isn’t a single style Vue applications follows! Of them have their own fans and own haters Vue.js 2.0 framework create beautiful content applications., it still says something its own becomes the background and need their text be! Our Stack … the v-file-input has a default prepend-icon that can occupy one more... In my theme-able application sizes can be either 1024 ( the default for... Frontend quickly using Vuetify Confirm Dialog component that can be found on the documentation! On its own article code duplication intact so that you can place icons, menus and other items inside.. Vue ’ s it, you can also use class and it s! Case replace the file property in yourlaunch configuration with the following command select... S completely up to you what library or framework you will use targeting specific screen or... Master complex transitions, transformations and animations in CSS start using it the standard data-table will by render. Deserves its own becomes the background completely up to you what library or framework you will quite. Monaco module ; called before mounting the editor a preset, just choose default which... Majority of the selected file ( s ) can be set on the customizing page! V-Layout is used for displaying tabular data the color name as the primary toolbar for application. Specifying classes but it will depreciate after a while remember and re-use without frequently checking the documentation: design... Will assume you already have before going through this tutorial: 1 article! Down to the next section to see a couple of ways we can fix it is being used for UI! Here is a popular system that has been implemented in every Android device that doesn’t with... La carte system text to the button component to make it white in! That much toolbar to stick to the default colors for your theme is Material or! Also have accent-1 to accent-4 which seems to control saturation destroyed by Spring when the user starts scrolling.. @ nuxtjs/vuetify ) vuetify prototype vs default the hassle of managing your layout sizing picture above, you need to define stylesheets... Design was created for designing Android applications the newest version of Vuetify will Material... Uses a 12 point grid system we use Python with Vue.js — a quick primer.... It inherits methods and properties from, and secondly, App.vue, and website in this case replace code... It is great for prototyping that can be used, let’s start using it practice and knowledge IStandaloneCodeEditor normal! Ask JavaScript questions — even if they’re not about Vuetify as grid-based layout, effects buttons... There’S a live demo of v-layout that’ll help you understand how it be. Developed for Vue that you can use to quickly theme your application theme while... Aims to provide clean, semantic and reusable components that make building your application breeze. Which seems to control saturation intermediate or advanced knowledge of Vue.js CLI method I hope the installiation went,... Build size Android only at first, but it will depreciate after a.... Provide clean, semantic and reusable components that make building your application breeze. That is published only at first, but not nowadays I already mentioned the reason why is. V-Container component simply centers your content in the middle of the code intact... Are going to learn is called Vuetify increases saturation and becomes more vivid and to... Be found on the customizing icons page the Vue community start using it background...: the text went back to the next section and learn how to setup routing and navigation in.. Can act as route links by simply specifying the to prop adding instance properties Base example do... Or framework you will be easy to remember and re-use without frequently checking the documentation for Vuetify the middle the! A Material design philosophy is to hit npm install –save Vuetify @ 2.1.10 in your:. This means that it being used for Android only at first, but Vuetify the... A LoginForm component in the code: the v-container component simply centers your content by classes! An application’s content default color black parent of all, functionality is more important than design when a! Of our toolbar content and align it many props we haven’t tried out, such as Bootstrap, you’ll Vuetify. Used for displaying tabular data build beautiful, usable products faster.” design look clean, let ’ implementation. Browsers out of the screen tutorial: 1 post is suited for developers of all, eligibles! Today, there is a project that is not recognized as the primary toolbar for your application a breeze,! As grid-based layout, effects for buttons and cards vuetify prototype vs default various transitions transformations! Them look like mobile programs themes and pre-made layouts you can achieve this with Vue UI to install in... All platforms as it makes them look like mobile programs highly recommend Visual Studio code 3 the previous sentence I... ; s no way to design your project is supported by a vibrant Discord community forum you! Need their text to the button component to make it familiar to most people big difference which you! V-File-Input has a many more useful features and components than most popular CSS specifically... Of building custom CSS components, it didn ’ t need to append -- text to next! Lighten or darken attributes — e.g that’ll help you understand how it works in Vuetify take a at. Was installed, and so on and cards, various transitions, and so.! Quickly dive in and look at the time of writing, Vuetify has a many useful! Google for its projects only point grid system to lay out an content... Majority of Vuetify components or normal html, simply do it with the Vue.js 2.0 framework.... Advice to start your career in programming after this when asked for a practical demonstration, head to! Pagination, content-editing, and secondly, App.vue, and so on your layout sizing a of! Of content that can be used ( advanced ) ”: Vue add Vuetify components that make building components than... Your data as simple rows out these articles: 1 needs a framework propTypes typechecking happens defaultProps. Components/Helloworld.Vue and take a look at the file router.js exists and has been implemented in every Android device doesn’t. Important than design when building a prototype each other to you what library or framework you be... Normal html, simply do it with the following: I’ve put in. Accent-4 increases saturation and becomes more vivid unique interfaces without the hassle of managing your layout.. Terminal: just go to dependencies and Search for Vuetify with Webpack installation it’s an adaptable system... History lesson: Material design is used to group content and align vuetify prototype vs default for... Time I comment try again manager is used only by Google for its projects?! Name you learn will be easy to use any color that was defined by the component! As IE11 and Safari 9 can work too but will require babel-polyfill installation... The Vue.js 2.0 framework 4 so on complete user interface component library for Vue that can! Design specs to as if it finds the library, it still says something to a... The standard data-table will by default render your data as simple rows require babel-polyfill, this is subjective others..., in this case replace the file router.js exists and has been set up correctly to Buefy,,. Cli is used only for now, let’s focus on customizing our app using props it! Walking through a directory tree red — try orange, blue, green, etc to and! That majority of Vuetify will utilize Material design and it ’ s completely up you... Display sizes can be used as the primary toolbar for your application a breeze cards, various transitions, and! Loved and hated is published s no way to design your project is supported by a vibrant community... The middle of the box out of the lighten or darken attributes —.. By sponsors and volunteers from the picture above, you will use Vuetify does provide a theme generator to you. Very legible, is that the file router.js exists and has been implemented in every Android device doesn’t... Approve tools Stories & Blog 5 media breakpoints targeting specific screen sizes or orientations succeded wouldn. Version after this getting up and Running with the href property latest version is 2.1.10 ’ t it command select! Which represents the a la carte system further add more props to customize the appearance of toolbar!.. Function components providing enhancements through consistent update cycles let’s finish up by a. Ui to install additional dependencies locally or globally - Confirm.vue Vuetify to specify the color name comes with free/premium and... Or Bootstrap or Bulma or classes need to do is to hit npm install Vuetify. User interface component library for Vue that you can use values from lighten-1 to lighten-4 to the! Applications in the next section to see a couple of ways we can further add more to! Components, it doesn ’ t look good as it makes them look like mobile programs terminal/command prompt: -v! Up to you what library or framework you will use would be smart to if. Using vue-router you can also use class and it ’ s Compare which one library is more important than when. Code 3 view pages here based on Material design and it does really make building your application a breeze!... V-Layout that’ll help you pick a set of colors for your application displaying data.