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
VuetifyをLaravel-Mixでコンパイルしたい
Search
SAW
October 15, 2019
Programming
1
830
VuetifyをLaravel-Mixでコンパイルしたい
VueJS Osaka #3 の発表資料です。
SAW
October 15, 2019
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
430
EditorConfig を使ってみよう
azuki
1
75
Symfony でサクッと作る REST API サーバー
azuki
1
140
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
180
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
280
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
140
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
360
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
310
Eloquent で relation を扱う基礎
azuki
0
160
Other Decks in Programming
See All in Programming
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Vibe coding コードレビュー
kinopeee
0
390
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
140
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
MCPで実現できる、Webサービス利用体験について
syumai
7
2.3k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
410
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
階層化自動テストで開発に機動力を
ickx
1
460
リッチエディターを安全に開発・運用するために
unachang113
1
340
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
770
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
250
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Designing for Performance
lara
610
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A designer walks into a library…
pauljervisheath
207
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GitHub's CSS Performance
jonrohan
1031
460k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Transcript
7VFUJGZΛ-BSBWFM.JYͰίϯύΠϧ͍ͨ͠ 7VF+40TBLB 4"8
$(whoami) ࢯ໊Ճ౻फҰ ࡀ େࡕࡏॅɾѪग़ ϋϯυϧωʔϜ4"8 4/4ΞΧϯτ 5XJUUFS!B[VLJ@FBUFS (JU)VCB[VLJQFOHVJO ॴଐגࣜձࣾ.4&/
7VFKT NBD04 -JOVY 'SFF#4%
7VFUJGZΛ͍ͬͯΔํڍख
7VFUJGZͱ 7VFKTͷ6*ίϯϙʔωϯτϑϨʔϜϫʔΫ ϚςϦΞϧσβΠϯΛ࠾༻ ॆ࣮ͨ͠6*ίϯϙʔωϯτ $BMFOEBS 1BSBMMBY 4QBSLMJOFͳͲ ܧଓతͳΞοϓσʔτ ि୯ҐͰͷࡉ͔ͳอक
None
-BSBWFM.JYͱ -BSBWFM͚8FCQBDLͷϥούʔϥΠϒϥϦ -BSBWFM1)1ϑϨʔϜϫʔΫ -BSBWFMඪ४Ͱ7VFKTΛαϙʔτ npm ίϚϯυͰ4'$ͷίϯύΠϧ͕Մೳ
ઃఆํ๏ͷ֓ཁ 7VFUJGZͷΠϯετʔϧ 8FCQBDLͷઃఆ 7VFUJGZͷઃఆ 7VFUJGZͷΠϯϙʔτ
7VFUJGZͷΠϯετʔϧ Vuetify ͱVuetify-Loader ΛΠϯετʔϧ npm install vuetify vuetify-loader -D ΞΠίϯϑΥϯτ͏߹@mdi/font
Πϯετʔϧ npm install @mdi/font -D
8FCQBDLͷઃఆ vuetify-loader/lib/plugin ΛಡΈࠐΈ 8FCQBDLͷplugins ʹvuetify-loader ͷΠϯελϯεΛՃ const mix = require(‘laravel-mix’);
const vuetifyLoader = require(‘vuetify-loader/lib/plugin’); mix.webpackConfig({[ plugins: [ new VuetifyLoader() ], }); webpack.mix.js
7VFUJGZͷઃఆ 7VFͷϓϥάΠϯͱͯ͠7VFUJGZΛಡΈࠐΈ ΞΠίϯϑΥϯτͷઃఆ import ‘@mdi/font/css/materialdesignicons.css’; import Vue from ‘vue’; import
Vuetify from ‘vuetify/lib’; Vue.use(Vuetify); export default new Vuetify({ icons: { iconfont: ‘mdi’ } }); resources/js/plugins/vuetify.js
7VFUJGZͷΠϯϙʔτ ϧʔτίϯϙʔωϯτʹ7VFUJGZΛಡΈࠐΈ 7VFUJGZίϯϙʔωϯτΛimportͳ͠Ͱར༻Մೳ import Vuetify from ‘./plugins/vuetify’; const app =
new Vue({ Vuetify, el: ‘#app’, }); resources/js/app.js
7VFUJGZͷར༻
7VFUJGZίϯϙʔωϯτͷར༻ ίϯϙʔωϯτΛλάͰݺͼग़͠ importจෆཁ σʔλόΠϯσΟϯάͳͲͷॻ͖ํ7VFͱಉ͡ <template> <v-sheet height=“400” class=“ma-4”> <v-calendar type=“month”
:now=“today” :events=“events”> </v-calendar> </v-sheet> </template>
ίϯύΠϧͱग़ྗͷ֬ೝ -BSBWFM.JYͰίϯύΠϧ͢Δ࣌ͱಉ͡ίϚϯυ npm run dev npm run watch npm run
prodͳͲ
σϞ εΫϦʔϯ্Ͱ࣮ԋ
·ͱΊ 7VFUJGZͷಋೖํ๏ͷઆ໌ 7VFUJGZͷΠϯετʔϧ 8FCQBDLͷઃఆํ๏ 7VFUJGZͷઃఆํ๏ 7VFUJGZͷΠϯϙʔτ 7VFUJGZͷར༻ํ๏ͷઆ໌ͱར༻ྫͷհ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠