Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Let's build a Vuejs web app
Search
Adora Nwodo
March 23, 2019
Technology
1
120
Let's build a Vuejs web app
Codelab for Vue vixens meetup. Introductory slides to show what would be covered in the codelab.
Adora Nwodo
March 23, 2019
Tweet
Share
More Decks by Adora Nwodo
See All by Adora Nwodo
Harnessing the Power of AI in Open-Source Cloud Engineering
adoranwodo
2
290
Getting Started With Data Structures
adoranwodo
1
440
StereoKit: The Open Source SDK for VR/MR
adoranwodo
0
150
Accessibility in the context of Mixed Reality
adoranwodo
0
53
Skills to Excel in Cloud Engineering
adoranwodo
0
420
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
78
7 Habits of Highly Effective Engineering Teams
adoranwodo
0
160
Designing secure cloud applications
adoranwodo
0
180
Building a sustainable personal brand
adoranwodo
0
120
Other Decks in Technology
See All in Technology
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
140
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
230
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
4
1.1k
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
10k
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
690
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
180
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
4 Signs Your Business is Dying
shpigford
184
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Agile that works and the tools we love
rasmusluckow
329
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Transcript
Let’s build a VueJS web app Vue Vixens. 23rd March,
2019
Hi, I’m Adora! Multidisciplinary software engineer GDG Ajah Co-organizer Women
Techmakers Ambassador Blogger, adorahack.com Twitter @theadoranwodo GitHub @adoranwodo 2
An open-source JavaScript framework for building user interfaces and single
page applications. 3
What we’d cover • Setting up your VueJS app •
CSS Grid • Styling in Vue • Code structure in preparation for moving forward 4
Tools you need • The WiFi (Connect if you haven’t)
• A modern browser (e.g. Chrome, Microsoft Edge) • A text editor (e.g. VSCode, Sublime Text) • NPM 5
Lets get started. 6
Install Vue and Dependencies • Install Vue CLI - npm
install -g @vue/cli -@vue/cli • Create a Vue Project - vue create pet-shop • Install Vuetify - npm i vuetify OR Clone the starter repo git clone https://github.com/AdoraNwodo/vue-vixens-starter.git 7
8 What we’d be building https://github.com/AdoraNwodo/vue-vixens-petshop
Shared Links • App.vue - bit.ly/vue-template • Styles - bit.ly/vue-style
• GitHub gist - gist.github.com/AdoraNwodo/ • Vue Documentation - https://vuejs.org/ 9
Lets start coding! 10