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
510
EditorConfig を使ってみよう
azuki
1
77
Symfony でサクッと作る REST API サーバー
azuki
1
150
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
180
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
290
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
360
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
320
Eloquent で relation を扱う基礎
azuki
0
170
Other Decks in Programming
See All in Programming
AWS Serverless Application Model入門_20250708
smatsuzaki
0
120
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
110
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
120
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
3
200
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
110
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
350
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.3k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
420
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
970
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
22
8.8k
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
230
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Gamification - CAS2011
davidbonilla
81
5.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Speed Design
sergeychernyshev
32
1.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
The Invisible Side of Design
smashingmag
301
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Side Projects
sachag
455
43k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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ͷར༻ํ๏ͷઆ໌ͱར༻ྫͷհ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠