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

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

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

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

Vuetify.js

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

Laravel

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

受付中

Vuetifyのiconが表示されない。

EjiOsa
EjiOsa

総合スコア18

Vue.js

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

Vuetify.js

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

Laravel

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

1回答

0リアクション

0クリップ

7492閲覧

投稿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

{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "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", "prod": "npm run production", "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" }, "devDependencies": { "axios": "^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "@fortawesome/fontawesome-free": "^5.7.2", "@mdi/font": "^3.5.95", "material-design-icons-iconfont": "^4.0.5", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "7.*", "url-loader": "^1.1.2", "vue": "^2.5.17", "vue-template-compiler": "^2.5.21" }, "dependencies": { "eslint": "^5.12.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "switch-php": "^1.1.3", "vee-validate": "^2.1.5", "vue-router": "^3.0.2", "vuetify": "1.3.16" } }

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

<template> <v-container fluid grid-list-xl> <v-layout wrap align-center> <v-flex xs12 sm6 d-flex> <v-select :items="items" label="Standard" > <v-icon>arrow_drop_down</v-icon> </v-select> </v-flex> </v-layout> </v-container> </template> <script> export default { name: "TestSelect", data() { return { items: ['Foo', 'Bar', 'Fizz', 'Buzz'] } }, } </script> <style scoped> </style>

試したこと

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vuetify.js

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

Laravel

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