Web application development with Vue.js Tomi Kumpulainen Bachelor’s Thesis February 2021 Information and Communication Technology Bachelor’s Degree Programme in Information and Communications Tech- nology Description Author(s) Type of publication Date Kumpulainen, Tomi Bachelor’s Thesis February 2021 Language of publication English Number of pages Permission for web publi- 56 cation: x Title of publication Web application development with Vue.js Degree programme Bachelor’s Degree Programme in Information and Communications Technology Supervisor(s) Manninen, Pasi; Niemi, Kari Assigned by Zaibatsu Interactive Oy Abstract The goal of the thesis was to engineer a learning tool in the form of a web application, which could be used to educate the most important features of the Vue.js ecosystem to an employee or a trainee more efficiently than the official documentation by focusing on the SFC syntax instead of the regular syntax used in the official documentation. The thesis was assigned by Zaibatsu Interactive Oy to complement their Self Dev program, which allows the employees of the company to use 5 % of their monthly worktime for developing their professional skills in a volitional manner. This goal was realized by carefully selecting the concepts discussed in the learning tool by critically evaluating the official documentation and designing the content of the learning tool based on the findings to build an efficient documentation covering the basics from the perspective of a SFC syntax user, which eliminates the need to interpret the official docu- mentation on a case-by-case basis. The learning tool was created by using the Vue.js ecosystem to build a PWA, which allows the web application to be used on any device with a standards-compliant browser and re- gardless of an active internet connection. Based on the results, tangible efficiency improvements were achieved, while further devel- opment options were found. Keywords/tags (subjects) Vue.js, Vue CLI, Vue Loader, Vue Router, Vuex, Web application development Miscellaneous (confidential information) Kuvailulehti Tekijä(t) Julkaisun laji Päivämäärä Kumpulainen, Tomi Opinnäytetyö, AMK Helmikuu 2021 Julkaisun kieli Englanti Sivumäärä Verkkojulkaisulupa myön- 56 netty: x Työn nimi Web-sovelluskehitys Vue.js:llä Tutkinto-ohjelma Insinööri (AMK), Tieto- ja viestintätekniikka Työn ohjaaja(t) Manninen, Pasi; Niemi, Kari Toimeksiantaja(t) Zaibatsu Interactive Oy Tiivistelmä Opinnäytetyön tarkoituksena oli luoda web-sovellusmuotoinen opetustyökalu, jota voitai- siin käyttää Vue.js-ekosysteemin tärkeimpien toimintojen perehdyttämiseen työntekijälle tai harjoittelijalle virallista dokumentaatiota tehokkaammin keskittymällä erityisesti SFC- syntaksiin virallisessa dokumentaatiossa käytettävän tavallisen syntaksin sijaan. Opinnäyte- työn toimeksiantajana toimi Zaibatsu Interactive Oy, joka tilasi työn täydentämään yrityk- sen Self Dev -ohjelmaa, joka mahdollistaa yrityksen työntekijöiden käyttää 5 % kuukausittai- sesta työajastaan ammattitaitonsa kehittämiseen vapaavalintaisella tavalla. Asetettua tavoitetta lähdettiin toteuttamaan valitsemalla huolellisesti opetustyökalussa käsiteltävät aiheet virallista dokumentaatiota kriittisesti arvioimalla ja löydösten perus- teellä opetustyökalun sisältöä suunnittelemalla, jonka pohjalta voitiin luoda tehokas doku- mentaatio SFC-syntaksin käyttäjän näkökulmasta, mikä poistaa tarpeen virallisen doku- mentaation tapauskohtaiseen tulkitsemiseen. Opetustyökalu luotiin rakentamalla PWA-sovellus Vuen ekosysteemiä hyödyntäen, joka mahdollistaa web-sovelluksen käytön aktiivisesta internet-yhteydestä riippumatta millä ta- hansa laitteella, jossa on standardinmukainen web-selain. Tuloksista voidaan päätellä, että konkreettisia tehokkuus parannuksia saavutettiin ja koh- teita mahdolliselle jatkokehitykselle löydettiin. Avainsanat (asiasanat) Vue.js, Vue CLI, Vue Loader, Vue Router, Vuex, Web-sovelluskehitys Muut tiedot (Salassa pidettävät liitteet) 4 Contents Terminology ........................................................................................................... 7 1 Introduction ................................................................................................. 11 2 Vue.js ........................................................................................................... 12 2.1 History ....................................................................................................... 12 2.2 Present ....................................................................................................... 13 2.3 Comparisons .............................................................................................. 14 2.3.1 Adoption ......................................................................................... 14 2.3.2 Performance ................................................................................... 15 2.3.3 Popularity ....................................................................................... 15 3 Selected concepts of the learning tool .......................................................... 18 3.1 Alpha .......................................................................................................... 18 3.1.1 Node.js ............................................................................................ 18 3.1.2 Yarn ................................................................................................. 18 3.1.3 Visual Studio Code .......................................................................... 19 3.1.4 Vetur ............................................................................................... 20 3.2 Vue CLI ....................................................................................................... 20 3.2.1 General ........................................................................................... 20 3.2.2 Installation ...................................................................................... 20 3.2.3 Creating a project ........................................................................... 21 3.2.4 Building a project ............................................................................ 22 3.3 Vue Loader................................................................................................. 24 3.3.1 General ........................................................................................... 24 3.3.2 Single-File Components .................................................................. 24 3.3.3 Pre-Processors ................................................................................ 26 3.3.4 Scoped CSS ...................................................................................... 27 5 3.4 Directives ................................................................................................... 28 3.4.1 General ........................................................................................... 28 3.4.2 Conditional rendering ..................................................................... 28 3.4.3 Attribute binding ............................................................................ 29 3.4.4 Iterative rendering .......................................................................... 30 3.4.5 Event handling ................................................................................ 31 3.5 Vue Router ................................................................................................. 32 3.5.1 General ........................................................................................... 32 3.5.2 Creating a router ............................................................................ 33 3.5.3 Using a router ................................................................................. 35 3.6 Vuex ........................................................................................................... 36 3.6.1 General ........................................................................................... 36 3.6.2 Creating a store .............................................................................. 37 3.6.3 Using a store ................................................................................... 38 3.7 Omega ....................................................................................................... 39 3.7.1 TypeScript ....................................................................................... 40 3.7.2 Server-Side Rendering .................................................................... 40 4 Creation of the learning tool ......................................................................... 41 4.1 Design ........................................................................................................ 41 4.2 Implementation ......................................................................................... 43 4.3 Testing ....................................................................................................... 44 5 Results ......................................................................................................... 45 6 Conclusion .................................................................................................... 47 References ........................................................................................................... 49 Appendices .......................................................................................................... 56 Appendix 1. The package.json-file of the learning