質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

1回答

9228閲覧

Vuetifyのiconが表示されない。

EjiOsa

総合スコア18

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2019/03/01 22:23

前提・実現したいこと

LaravelでVueを使用していて、今回はそのVueにVuetifyの導入を試みています。
Vuetify自体の表示にも戸惑っていたのですが、なんとか表示できるようになりました。
過去の質問

デフォルトに設定されているMaterial Iconsを使用したいです。
また、使用方法はCDNではなくローカルでの使用を希望します。

発生している問題

ドキュメントに沿って
$ yarn add material-design-icons-iconfont -Dを実行
import 'material-design-icons-iconfont/dist/material-design-icons.css'を追加しましたが、表示されるのは文字列でアイコンは表示されません。

###エラーコード

GET http://localhost/fonts/vendor/material-design-icons-icondist/MaterialIcons-Regular.woff?9219a80f0478e0bfdee5f4c753ce8535 net::ERR_ABORTED 404 (Not Found)

該当のソースコード

package.json

JSON

1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 "watch": "npm run development -- --watch", 7 "watch-poll": "npm run watch -- --watch-poll", 8 "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 9 "prod": "npm run production", 10 "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 11 }, 12 "devDependencies": { 13 "axios": "^0.18", 14 "bootstrap": "^4.0.0", 15 "cross-env": "^5.1", 16 "@fortawesome/fontawesome-free": "^5.7.2", 17 "@mdi/font": "^3.5.95", 18 "material-design-icons-iconfont": "^4.0.5", 19 "jquery": "^3.2", 20 "laravel-mix": "^4.0.7", 21 "lodash": "^4.17.5", 22 "popper.js": "^1.12", 23 "resolve-url-loader": "^2.3.1", 24 "sass": "^1.15.2", 25 "sass-loader": "7.*", 26 "url-loader": "^1.1.2", 27 "vue": "^2.5.17", 28 "vue-template-compiler": "^2.5.21" 29 }, 30 "dependencies": { 31 "eslint": "^5.12.1", 32 "stylus": "^0.54.5", 33 "stylus-loader": "^3.0.2", 34 "switch-php": "^1.1.3", 35 "vee-validate": "^2.1.5", 36 "vue-router": "^3.0.2", 37 "vuetify": "1.3.16" 38 } 39}

app.js

require('./bootstrap'); import Vue from 'vue' //以下、VeeValidateの導入 import VeeValidate, { Validator } from 'vee-validate'; Vue.use(VeeValidate); import VeeValidateJaLocale from 'vee-validate/dist/locale/ja' Validator.localize('ja',VeeValidateJaLocale); //以下、Vuetifyの導入 import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' import 'vuetify/src/stylus/app.styl' //以下、Vuetifyのicon import '@mdi/font/css/materialdesignicons.css'//mdi import 'material-design-icons-iconfont/dist/material-design-icons.css'//md Vue.use(Vuetify,{ iconfont:'md'||'mdi' }); import router from './router.js' import UserRoot from './UserRoot' Vue.component('admin-root', require('./AdminRoot').default); Vue.component('user-root', require('./UserRoot').default); const admin_top = new Vue({ el: '#admin-top', router, }); const user_top = new Vue({ el: '#user-top', router, render:h=>h(UserRoot) });

ドキュメントのselectを流用してサンプルを作成しました
このコンポーネントを呼び出す側で<v-app>でのラッピングはしています

vue

1<template> 2 <v-container fluid grid-list-xl> 3 <v-layout wrap align-center> 4 5 <v-flex xs12 sm6 d-flex> 6 <v-select 7 :items="items" 8 label="Standard" 9 > 10 <v-icon>arrow_drop_down</v-icon> 11 </v-select> 12 </v-flex> 13 </v-layout> 14 </v-container> 15</template> 16 17<script> 18 export default { 19 name: "TestSelect", 20 data() { 21 return { 22 items: ['Foo', 'Bar', 'Fizz', 'Buzz'] 23 } 24 }, 25 } 26</script> 27 28<style scoped> 29 30</style>

試したこと

上記のapp.js内にある通り、他のicon(@mdi)も使用してみましたが、アイコンは表示されません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Vuetify公式サイトを覗いたところ、mdi-のプレフィックスを付けるよう書かれていました。
こちらはすでにつけていらっしゃいますか?
https://vuetifyjs.com/ja/components/icons

投稿2019/07/01 14:11

ttakatech

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問