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
300
Getting Started With Data Structures
adoranwodo
1
450
StereoKit: The Open Source SDK for VR/MR
adoranwodo
0
160
Accessibility in the context of Mixed Reality
adoranwodo
0
58
Skills to Excel in Cloud Engineering
adoranwodo
0
430
The Opportunities In The Decade Of Mixed Realities
adoranwodo
0
89
7 Habits of Highly Effective Engineering Teams
adoranwodo
0
170
Designing secure cloud applications
adoranwodo
0
190
Building a sustainable personal brand
adoranwodo
0
130
Other Decks in Technology
See All in Technology
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
340
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
150
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.2k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
Create Ruby native extension gem with Go
sue445
0
130
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
AWSで始める実践Dagster入門
kitagawaz
1
740
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Applications with DynamoDB
mza
96
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Code Reviewing Like a Champion
maltzj
525
40k
KATA
mclloyd
32
14k
Designing Experiences People Love
moore
142
24k
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