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
810
VuetifyをLaravel-Mixでコンパイルしたい
VueJS Osaka #3 の発表資料です。
SAW
October 15, 2019
Tweet
Share
More Decks by SAW
See All by SAW
EditorConfig を使ってみよう
azuki
1
36
Symfony でサクッと作る REST API サーバー
azuki
1
47
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
93
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
200
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
110
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
300
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
240
Eloquent で relation を扱う基礎
azuki
0
130
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
100
Other Decks in Programming
See All in Programming
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
180
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
140
Domain-Driven Transformation
hschwentner
2
1.9k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
880
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
GAEログのコスト削減
mot_techtalk
0
120
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Designing for humans not robots
tammielis
250
25k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Why Our Code Smells
bkeepers
PRO
336
57k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
560
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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ͷར༻ํ๏ͷઆ໌ͱར༻ྫͷհ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠