- 投稿日：2021-11-26T16:07:12+09:00
<router-view/>を読み込んでくれなかった時に確認したこと
はじめに もともとVue-Routerを使わずに開発していたシステムへあとからVue-Routerを追加 インストールとRouter.jsファイルの用意ができたのに以下のエラーで画面が表示されず。。 Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. 修正前 修正前のソースコードは以下のようになってます。 sample.blade.php <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Cache-Control" content="no-cache"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <router-view/> </div> <script src="{{ asset('js/app.js') }}" charset="UTF-8" defer></script> </body> </html> router.js import Vue from "vue"; import VueRouter from "vue-router"; import UserIndexComponent from "./components/UserComponent"; import UserEditComponent from "./components/UserEditComponent"; import UserAddComponent from "./components/UserAddComponent"; Vue.use(VueRouter); const router = new VueRouter({ mode: "history", routes: [ { path: "/", name: "index", component: UserIndexComponent }, { path: "/edit/:id", name: "edit", component: UserEditComponent }, { path: "/add", name: "add", component: UserAddComponent }, ] }); export default router; app.js /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */ // const files = require.context('./', true, /\.vue$/i) // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app', }); 確認したこと スペルミスがないかどうか 個人的によくやってしまうスペルミス。。 routerがroutersになってないか等々確認しました importファイルのパス確認 パスの記載ミスもよくやってしまうミスの1つ。。 bladeファイルで呼び出しているjsファイルのパスは間違っていないか、ブラウザからそのパスで閲覧できるかも確認しました パス自体は問題なかったのですが、そもそもapp.jsでrouter.jsをimportしていない。。？ router.jsのインポート app.jsへrouter.jsをインポートし、Vueのインスタンスへrouterを渡します。 app.js /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); + import router from './routers.js'; window.Vue = require('vue'); /** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */ // const files = require.context('./', true, /\.vue$/i) // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app', + router, }); 動いた。。！ ビルドしなおしたら無事に画面へ表示されました 解決までに2時間もかかってしまったのは痛かったです。。 同じ事象に関する記事を探したのですが、vue-routerを使うことって少ないのでしょうか。。？ あまり参考にできそうなサイトがなく時間がかかってしまいました まだまだVue.jsは初心者なので、勉強し続けたいと思います。
- 投稿日：2021-11-26T12:16:29+09:00
ふざけんなFireBase!!!
FireBaseすごすぎる 業務外で、アプリを開発したいフロントエンドエンジニアは、まずfirebaseを使うのが一番効率よく、アプリ開発ができるという情報を聞いて、実践してみることに。 確かに、バックエンドの知識がなくても、わかりやすい公式ドキュメントに従っていけば、バックエンドとのやり取りが容易にできる！！？ バックエンドエンジニア不要論まで謳われるようになったこの技術。すごすぎる。 ただ問題なのは、最近バージョンアップしたことである。書き方が、だいぶ変わり、qiitaの記事をコピペしても、大体ver8の記事なので、動きません。公式ドキュメントを参考にしながら実装すれば問題はないのですが。 ふざけているポイント 問題は画像を扱うデータベースであるstorage。 数字や文字列を保存できるcloudfirebaseには このようにversionごとにサンプルが載っている。 しかし！！！ storageには 書き方が一通りしか載っていない。この書き方がver8の書き方であり、普通にfirebaseをインストールした人は最新版がインストールされるため、当然動かない。 せめて、古いバージョンの書き方であることを記載しといてくれ！！！ では、新しいバージョンの書き方はどこに乗っているのかというと、言語を英語表記にすると出てくる。こちらには親切にver8,ver9の書き方が書いてある。 これくらい早く翻訳してくれよ。。
- 投稿日：2021-11-26T12:06:27+09:00
vue-fontawesomeのスタイルがcontent-security-policyにより適用されない問題
問題 とある PaaS で Vue.js のアプリを作っていたところ Font Awesome の SVG だけ妙に巨大化する現象に遭遇しました。 調べてみたところ、index.html に自動的に content-security-policy header が付加されていました。 index.html にあらかじめ記述されている link 要素や style 要素には自動的に nonce 属性が付加されており読み込まれていたのですが、vue-fontawesome が動的に組み込む style 要素には nonce 属性が付かないため、読み込まれていないのが原因でした。 解決方法 vue-fontawesome には動的に CSS を適用するのをキャンセルするオプション autoAddCss がありました。 環境 vue 3.2.21 @fortawesome/vue-fontawesome 3.0.0-5 main.ts import { createApp } from 'vue' import App from '@/App.vue' import store from '@/store' import router from '@/router' import '@/font-awesome' // Font Awesome 関連は font-awesome.ts に移す import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' createApp(App) .use(store) .use(router) .component('font-awesome-icon', FontAwesomeIcon) .mount('#app') font-awesome.ts import { config, library } from '@fortawesome/fontawesome-svg-core' import { faCheck, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons' // 以下の2行がポイント import '@fortawesome/fontawesome-svg-core/styles.css' config.autoAddCss = false library.add(faCheck, faChevronLeft, faChevronRight) config.autoAddCss = false で CSS の自動挿入を無効化して、import で CSS を自力で読み込むことで、最初から index.html に style 属性として追加された状態になります。