Working with Vuetify 2 – Part 1
In a previous post I told you about the Vuetify framework to work with VueJS, and with which I’ve been working for several months now. At the beginning I used the first versions, always with very good results, until the most recent stable version 1.x, specifically 1.5.18.
A year ago, more or less, a new version came out: the new VuetifyJS versión 2.x but the adaptation to this new version has required an extra effort on my part, since the changes are quite significant, as there is not full compatibility between version 1 and 2. Here I told you my effort.
You can help me to maintain this blog!
This is exactly what happened to Vuetify, because the direct change of versions if a medium-big project with I was working with notice it, and I got several erros of all kind.
Precisely, this “problem” of compatibility is one of the aspects that I value most when I have to start working with new technologies, and specifically, it was decisive in my non-option against React.
Starting with Vuetify, using a predefined template
This exercise was the first one I got into when I started to use Vuetify: use a predefined tempate as an example and try to write some code. The main problem is that functionality is limited and very basic, and I needed to invest some time trying to figure out how to get benefits. And that’s what I want to write here and how I do it with no helpers. You have several templates available here.
As you can imagine, I am doing this without using Vue-CLI neither nodeJS. All direct by using CDN. During this entrance and the next ones, I try to explain what you can do for having the template available.
But before going on and before writting the first line of code, I encaurage you to read about the v-app component, the starting point to any app, and compulsory, because it is the component that works for you in the sense of using the app in any size and device (ni the supported browsers).
My recommendations about Vuetify
Honestly, I recommend using Vuetify if you work with VueJS, for several reasons:
- It is beautiful
- It has very good documentation
- Multiples examples are available in the documentation
- It is in constant evolution
In fact, it is a good choice for using Material Design in your application.
Using a predefined template: YouTube
Maybe, it is not the simplest template, but it is one of the template I got a lot of benefit for my projects. Also, It can be also good for trying the login template, because maybe, you can get a component for reusing. Another useful template, if you need to learn about positioning is Sandbox.
The first step is downloading the template (in previous versions, you have a zip file with everything ready, but last versions you have only available the .vue file). Now, These are the modifications you need to apply for using it with no helpers.
The HTML code
Back to the code, this first part only deals with HTML code, the libraries you need to load and a few more things.
Important!!! I am not using at any moment NodeJS or any helpers, it is everything with no process (I already explain a lot here VueJS with no helpers). You can thing that it is not the right path for a web development, but maybe it is good to know how you hava an alternative way, and avoid learn Webpack, NodeJs, …. and thoses long npm install that I hate of thousands of libraries that you do not know how to use them. Of course I won’t do unit test (although I should).
Because there is no option of having the HTML code, here you have all you need:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@firstname.lastname@example.org/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://email@example.com/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <link type='image/png' rel='shortcut icon' href='img/favicon.ico' /> <title>Manejando Datos - Vuetify 2 Ejemplo</title> <link type="text/css" rel="stylesheet" href="css/proyecto.css"> </head> <body> <div id="app"></div> <script src="https://firstname.lastname@example.org/dist/vue.js"></script> <script src="https://email@example.com/dist/vuetify.js"></script> <script src="componentes/menu.js"></script> <script src="scripts/index.js"></script> </body> </html>
The HTML code is simple: in the HEAD part you load the style libraries that you need: material design, vuetify, and even your own CSS.
in the Menu.js file I will code the menu component based on the .vue template I downloaded.
Part 2 of the series will be dedicated to the menu component, while in part 3 I will write about store y Vuex.
You have the code available on my GitHub.
I hope this can be useful to you, and let’s wait for the next part where you can code the menu component!