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
Vuesaxを使ってみる
Search
TanakaMidnight
December 20, 2018
Technology
0
430
Vuesaxを使ってみる
TanakaMidnight
December 20, 2018
Tweet
Share
More Decks by TanakaMidnight
See All by TanakaMidnight
APIを使う、作る
tanakamidnight
0
150
Vue.jsで書くAdobe XD Plugin
tanakamidnight
0
540
Web App created by Vue.js / Firebase (RxFire)
tanakamidnight
0
400
Firebaseここ最近(2019/01~05)の新機能(Osaka, Web寄り)
tanakamidnight
1
440
Vue.jsで作るAdobeXDプラグイン
tanakamidnight
0
670
できるようになるかもしれないVueNative
tanakamidnight
0
30
ハンズオンを支えた技術
tanakamidnight
0
250
Vue.jsの始め方
tanakamidnight
0
360
FirebaseでWebサービスを作った(てる)話
tanakamidnight
0
530
Other Decks in Technology
See All in Technology
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
210
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
本が全く読めなかった過去の自分へ
genshun9
0
260
Wasm元年
askua
0
140
rubygem開発で鍛える設計力
joker1007
2
200
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.2k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
730
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Scaling GitHub
holman
459
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Faster Mobile Websites
deanohume
307
31k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
Vuesaxを使ってみる OsakaVueLT 2018/12/17 @TanakaMidnight
自己紹介 @TanakaMidnight SE Lang : Python(Django), Node.js Infra : Firebase
Etc : Line 関係 (MessagingAPI, LIFF, Clova)
Vuesaxとは Vue.js コンポーネントライブラリ ・ BootStrap みたいに 簡単にレスポンシブなデザインをする。 ・よく使いそうな UI のパーツ
( コンポーネント ) が用意されているので、 いちいち作らなくても済む。
Vuesaxの特徴 ・今風ないい感じのデザイン。 ・よく使う便利な UI パーツが多い。 Dialog, Loading, Tab, Table
など 参考動画 : https://vimeo.com/276329344 ・部分的に適用が可能。 ・比較的ドキュメントが見やすい。(ただし英語)
Install # install vuesax npm install vuesax # install material-icons
npm install material-icons
Use [main.js] import Vue from 'vue' new Vue({ el: '#app',
router, components: { App }, template: '<App/>' });
Use [main.js] import Vue from 'vue' import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css' import 'material-icons/iconfont/material-icons.css'; Vue.use(Vuesax) new Vue({ ←追加
比較Demo
似たようなライブラリ ・ Vuetify より MaterialDesgn に準拠 (Google のサイトっぽい ) しているデザイン
・ BootstrapVue jQuery に依存しない Bootstrap ・ Materialize Vue.js に特化していおらず、見た目は Vuetify と似ている。
Materialize Logo ・・・ちなみに
Materialize Logo ほぼ一致
まとめ ・ Vue で使える UI コンポーネントライブラリは いくつかあるのでいろいろ触ってみると面白い。 ・雰囲気凝ったっぽいデザインにするなら Vuesax
はアリかも。