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!
Problems of compatibility … in Javascript
Surely, if you have programmed with some Javascript framework, the compatibility problems between versions will not be something unknown to you and you know what to do: stay calm and put an extra effort.
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.
Back to Vuetify, I must say that the errors I got redirect me to this guide for migration with Vuetify. In my case, the migration process was a long because several changes affected my code.
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.
By now, if you have read the migration’s guide, there are a few recommendations when using CDN, and that’s exactly what I am going to do for the HTML code, althougth very basic, becuase the important part is referencing to the Javascript libraries of Vue, Vuetify, ….
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/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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 BODY you only need the DIV container where all action will be done. And of course, you need to load the Javascript code: vue, y vuetify.
in the Menu.js file I will code the menu component based on the .vue template I downloaded.
To improve the options available, it may be of interest to also include VueX (which we’ll see in part four), vue-router (for URL handling), and axios (for API calls). In addition, we’ll load Javascript from different parts: on the one hand, we’ll load different files that will make up our VueX store, and on the other hand, we’ll load different.
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!