Web starter - Vue

Web starter pack with Vue

In our first tutorial we will explore, break and play with a simple but modern website.

Prerequisites

You will need to install the following programs:

You may use any other editor, but Visual Studio Code is probably the best editor around: it’s free, runs on Mac/Windows/Linux and has many useful extensions too.

Source code

The template can be downloaded from Github (a source code repository) using this link:

https://github.com/aka-monster/web-starter-vue/archive/refs/heads/main.zip

The code and info can be viewed here as well:

https://github.com/aka-monster/web-starter-vue

Intro

A website is basically a set of files written in languages that most browsers interpret in a similar way.
The most known formats are:

  • HTML (Hyper Text Markup Language) used to describe a website elements like titles, tables, images and other entities using tags for each element type.
  • CSS (Cascading Style Sheets) to define visual styles like colors, fonts, etc.
  • Javascript - a programming language to add interactivity or logic to the website.

You can learn more about it online from sites like this:

https://www.codecademy.com/learn/learn-html

A lot has changed since the early days of the web. Many different technologies, tools and frameworks were created to add functionality, so having to decide which framework, language or set of tools is not a simple decision.

So instead of going slowly through all the different tools, bits and pieces we wil simply use a combination of technologies in a way that will get you up and running in no time.

Believe your Mandalorian spirit when it says “this is the way”.

Once you download/unzip or GIT the code, open Visual Studio Code then select the “open folder” option to the source code. Before doing anything else, add the following extension to Visual Studio: “Live Server” (from the settings/extensions menu)

Once that’s installed you can find and select the index.html file inside the editor and then use the option “Open with Live Server” - that should open a website like this

http://127.0.0.1:5500/index.html#/

Feel free to browse and play with it for few moments then let’s get back to break it down.

Take notes while you browse and click buttons, did you noticed what happened when clicking the “EN”, “ES” buttons?

So well, this is a basic but modern website written on top of two popular frameworks:

UPDATE: Vue 3.0 was released couple days ago (Feb 7 2022), the demo/code uses Vue 2.0

Using both would normally require you to install or setup couple other things, but instead for this demo we are using the production ready libraries, hosted in CDN (content delivery network - or the place to share code for websites and applications) so we don’t need to download or install anything else.

Let’s see what’s under the hood.

HTML

The only html file is index.html, it references several libraries like Vue by using the keyword script this way:

1
2
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>

CSS

There is also a little bit of style changes in the global/style.css file.
Feel free to change the colors and see what happens. You can change the color with Visual Studio Code by mouse/selecting the value after # in the color or by typing any valid hex color code like the ones from this site:
https://www.color-hex.com

1
2
3
.language {
  color: #198754;
}

Javascript

This is where the magic happens, as we build on top of an existing framework, we use their convention and libraries.

The main code are is at App.js

Before going any further, the site suports multiple languages, to achieve that we use an extension called i18n (internationalization = i - 18 letters - n), that required that we define translation text in certain format like this:

1
2
3
4
5
6
7
8
9
10
// Ready translated locale messages
const messages = {
  en: en,
  es: es,
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

See the files under global/languages/en.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const en = {
  menu: {
    home: "Home",
    schedule: "Schedule",
    weather: "Weather",
    crypto: "Crypto",
  },
  message: {
    welcome: "Welcome",
  },
  page: {
    schedule: {
      options: "Options",
      submit: "Book",
    },
  },
};

Try changing some values to Maori, or Japanese, or any language and see what happens.

If you want to add a new language then the process is to copy any existing file into the same folder, creating for instance ru.js for Russian
Then it needs to be added to the messages array then into the index.html area:

1
2
3
4
5
6
7
8
9
10
11
 <form class="d-flex">
    <button class="language btn btn-outline-success active" type="button" v-on:click="setLanguage('en')">EN</button>
    <button class="language btn btn-outline-success" type="button" v-on:click="setLanguage('es')">ES</button>
    <button class="language btn btn-outline-success" type="button" v-on:click="setLanguage('ru')">RU</button>
</form>

...

<script src="./global/languages/en.js"></script>
<script src="./global/languages/ru.js"></script>
<script src="./global/languages/es.js"></script>

Go back and forth to the index.html and App.js
For the weather menu, there is a segment of code that tells Vue what component to call, for the label we use i18n. Try changing that and see what happens even if it breaks, then revert back to the original point to continue

index.html

1
2
3
<router-link class="nav-link" to="/weather">{{ $t("menu.weather") }}</router-link>
...
<script src="./components/weather.vue.js"></script>

App.js

1
2
3
4
5
6
7
8
const routes = [
  ...
  { path: '/weather', component: weatherComponent },
  ...
]
const router = new VueRouter({
  routes
})

components/weather.vue.js

1
2
3
4
5
6
var weatherComponent = Vue.component("Weather", {
  template: ...
  async mounted() {
    await this.getData();
  },
});

Components

The more complex part of the system is how we create and use web pages. In Vue you can have all pieces of logic/display for a page in one file, that makes sense as long as that page or component is small.

Have a look at the welcome.vue.js file.
Compare it with the crypto.vue.js file.

The welcome page contains mainly HTML code and a bit of i18n.
The crypto page contains a bit of logic to display the value of dogecoin, just because crypto dogos are cool.

Another complex page is the weather, but regardless of their complexity all Vue components or pages contain:

  • HTML inside a “template” section
  • methods to call
  • data to return
  • events to be handled as mount() that kicks in when the page is displayed

For weather and crypto the code uses external APIs (application programming interface - the way programs can exchange information).

Modern API can receive parameters in a way similar to a websites and return data in JSON (JavaScript Object Notation) or other formats that the code then needs to convert into something that humans can read/understand.

For instance, open the following API call/URL:

https://www.7timer.info/bin/astro.php?lon=174.77&lat=-36.86&ac=0&unit=metric&output=json&tzshift=0

The weather info from API returns something similar to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
	"product" : "astro" ,
	"init" : "2022012400" , <- date/time >
	"dataseries" : [
	{
		"timepoint" : 3,
		"cloudcover" : 9,
		"seeing" : 4,
		"transparency" : 7,
		"lifted_index" : 6,
		"rh2m" : 14,
		"wind10m" : {
			"direction" : "NE",
			"speed" : 3
		},
		"temp2m" : 18,  <- temperature >
		"prec_type" : "rain"
	},

The code then iterates over that information and process few fields that are of interest, like temperature or chance of rain.

Retrospective

OK, time to pause and to recap what we’ve learned today.

Do not worry much about the complexities of the languages or frameworks or data, it is more important to try see the patterns and big picture.

I hope you may have enjoyed browsing or breaking the code, building apps is fun and involves a bit of different skills and superpowers, not everything is logic and maths, it also requires creativity and thinking out of the box.

I also hope you may have a glipmse of the different parts involved in modern websites, as user interfaces, support for multiple languages or cultures, services that provide data, etc.

There is plenty of room to create and I sincerely hope this give you new ideas or some motivation to gain more knowledge and to seek new opportunities.