VueRouterのナビゲーションガードがいつ発火するのかよくわからなかったので、パターンを整理した。 - Qiita
VueRouterのナビゲーションガードがいつ発火するのかよくわからなかったので、パターンを整理した。Vue.jsvue-router ナビゲーションガードって、どれを使えばいいのかよくわからなかった beforeEachとか、beforeEnterとか、beforeRouteEnterとか、整理できてなかった。 とりあえず、beforeEnterっぽい気がする、という曖昧さでガードしようとしてた。 まあ、どっちでもいいかな、みたいな。 が 「どっちでもいいはないから。どっちかしかないから。」 という何事にも意思を込めろというかつての先輩の言葉を胸にしっかりと整理して、これだ！という意思を込めていきたいと思います。 整理しました（一部ガードは割愛） ※１パラメーター変更時に起こりうるパターン。コンポーネントガードの手法として、beforeRotuteUpdateの他にwatchを使ったルー
【 Vue.js】Vue.jsでGoogleBookAPIを取得する。 - Qiita
GoogleBooksAPI概要 Googleに登録されている本を検索する事ができる。 登録なしで使える：1000件/日 情報の精度、検索結果が少し弱い 使用API 公式リファレンス * base_url * https://www.googleapis.com/books/v1/volumes? + 検索queryq=ウーロン茶 * response:json { "kind": "books#volumes", "totalItems": 1484, "items": [ { "kind": "books#volume", "id": "kFIgNwAACAAJ", "etag": "wn0MtLjELK0", "selfLink": "https://www.googleapis.com/books/v1/volumes/kFIgNwAACAAJ", "volumeInfo": {
【Vue.Router】404ページへの遷移 - Qiita
urlに存在しないページへのpathをリクエストした場合の404ページの表示方法 環境 @vue/cli 4.5.12 手順 ルーテイングを管理するrouter/index.jsで以下のように設定。 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' //NotFoundコンポーネントをimport import NotFound from '@/someDir/NotFound.vue' Vue.use(VueRouter) const routes = [ { path: '*', //設定したurlにいずれもマッチしない場合 // redirect: '/', ※redirectオプションは任意で設定 component: NotFound //No
vue-router
Vue Router は Vue.js (opens new window) 公式ルータです。これは Vue.js のコアと深く深く統合されており、Vue.js でシングルページアプリケーションを構築します。機能は次の通りです: ネストされたルート/ビューマッピング モジュール式、コンポーネントベースのルータ構造 ルートパラメータ、クエリ、ワイルドカード Vue.js の transition 機能による、transition エフェクトの表示 細かいナビゲーションコントロール 自動で付与される active CSS クラス HTML5 history モードまたは hash モードと IE9 の互換性 カスタマイズ可能なスクロール動作 はじめに または 例 (opens new window) から試してください。 (README.md (opens new window)を参照してくだ
Vue.jsプロジェクトをサブディレクトリで配信するときの注意点 - Qiita
はじめに この記事は以下の説明をしているものです。 vue-cliでビルドした静的ファイルを配信する方法(Nginx) vue-cliでビルドした静的ファイルをサブディレクトリで配信する方法(Nginx) 環境 vue 2.5.17 vue-cli 3.1.1 vue.js (vue-cli) でビルドした静的ファイルをnginxで配信する vue-cliはハッシュモードとヒストリーモードを設定できます。 デフォルトはハッシュモードであり、vue-cliでプロジェクトを作るとデフォルトではURLが https://example.or.jp/#/ のように勝手に#がついているのが分かります。 URLが変化したときにブラウザのリロードにもしっかり対応してくれるのでラクなのですが、見た目があまりよろしくないのでヒストリーモードにします。 しかし、ヒストリーモードではvue-cliで作った静的フ
Vue router を使った時の GitHub Pages での 404 対策 - Qiita
どんな問題？ vue-router は SPA なので / 以外のページを直接叩きに行くと 404 する。 自分で nginx なんかでデプロイする場合は try_files /index.html とかで綺麗に解決するが、 GitHub Pages だとこの設定はできない（たぶん）。 普通に / 以外のページに行ったあと F5 するだけで 404 するのでけっこうキツい。 追記 GitHub Pages では SPA ではなくMPA にするほうがよさそう。 MPA にすれば複数 index.html ができるので以下の対策は必要ない。 対策方法 GitHub Pages は 404.html があると使ってくれるので、 404.html にスクリプトを仕込んでそこから /#/hoge/fuga/ へリダイレクトする（これで / がロードされる）。 / 側では Vue が動く前に URL
[Vue3]ECサイトによくある画像のズームプレビューを作ってみた - Qiita
<template> <div class="relative"> <div class="lg:ml-10"> <div class="relative product-image" @mouseenter="showZoomArea = true" @mouseleave="showZoomArea = false" @mousemove="zoomPreviewArea" > <!-- 元の画像の表示 --> <div class="product-image-content"> <img :src="imageList[showingImageIndex].url" class="center px-2 lg:px-0 product-image-current" /> </div> <!-- 元の画像の上でカーソルが動くときに表示される半透明の白い部分 --> <div v-if
![[Vue3]ECサイトによくある画像のズームプレビューを作ってみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3194b92cf92a307bd2cc7c52990b036d91621fc4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlMyU1REVDJUUzJTgyJUI1JUUzJTgyJUE0JUUzJTgzJTg4JUUzJTgxJUFCJUUzJTgyJTg4JUUzJTgxJThGJUUzJTgxJTgyJUUzJTgyJThCJUU3JTk0JUJCJUU1JTgzJThGJUUzJTgxJUFFJUUzJTgyJUJBJUUzJTgzJUJDJUUzJTgzJUEwJUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJTkzJUUzJTgzJUE1JUUzJTgzJUJDJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04YzgxOTQwMzY0YjJkN2FiYzg2ZmJkZTVjNWJlNjc1Nw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYWEtbmEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTUyNDc1YjQzZTlmOTZkMThkYjAwMzMyM2RlMDE0YTU5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D8826a7b90e537509d45b95ae269fb419)
グローバルステート管理ライブラリである「Pinia」について - Qiita
はじめに 今回はグローバルステート管理ライブラリである「Pinia」について紹介と実際に自分で触ってみたいと思います。 興味を持ったきっかけとしては10月27日に開催された「v-tokyo オンライン Meetup#14」内で「Pinia」ライブラリの開発者である Posva氏の発表を聞き、複雑なコードを書かずともグローバルなステートの型安全を担保してくれるという魅力もさることながら、「アイコンが可愛い！！」と思って大変興味を持ちました。 Pinia ドキュメント Piniaとは まずPiniaとは、Vue.js向けの状態管理ライブラリであり、階層が深くなったコンポーネント間でデータの共有ができるものです。Vuexと同様にコンポーネント間で状態の受け渡しが容易になるため、ある程度規模の大きい開発において威力を発揮する反面、小規模な開発or個人開発でもTypeScriptのフルサポート・記述
【Vue.js 3】書籍等にはあまり載ってなかった（と思う）こと5つ - Qiita
<template> <div :class="['child', modifier]"> // コンテンツ </div> </template> <script> export default { props: { modifier: String, }, } </script> 今回 CSS 設計は FLOCSS を参考にした別ディレクトリで管理していましたので、このようなケースが発生しました。 このような場合は props で値を受け渡して、class を bind させればいいですね。 Child.vue で設定しておきたいクラス名がある場合は、上記のような形で配列にしておけばいいですし、条件によってクラスを付け外しする場合はオブジェクトにするケースもあります。 また、SFC 内で CSS が完結していると記述は変わってくると思いますし、カプセル化された Web Component
Vue.jsで404や500エラーページの制御がしたい - Qiita
404エラーページ Vue Routerを利用して制御する。 ワイルドカードのパスを作ることで、どのパスにもマッチしなかった時のビューに飛ばすことができる。 サブディレクトリで使う404ビューを変えることもできる。 import Vue from 'vue' import VueRouter from 'vue-router' import Index from '@/views/Index' import NotFoundError from '@/views/errors/404' import FooNotFoundError from '@/views/errors/foo/404' import BarNotFoundError from '@/views/errors/bar/404' Vue.use(VueRouter) const routes = [ { path: '/
Vue.jsで孫 → 親コンポーネントへの値の受け渡しを楽に行う方法 - Qiita
サマリ Vue.jsで孫 から 親のコンポーネントへ値を渡す際、$emitを使いますが、中間のコンポーネントが増えてくるとその分emitを記述しないといけません。 この中間のコンポーネントでのemitの記述を減らすのに$listenersが使えますので、その紹介をします。 $emitと$listenersの比較 $emitを使った場合 // Parent.vue <template> <Child @click="onClick" /> </template> <script> export default { components: { Child, }, methods: { onClick(value) { alert(value); }, }, } <script> // Child.vue <template> <GrandChild @click="onClick" /> </
SpotifyAPI ＋ Vue.jsで自分が普段よく聴く曲の特徴を可視化する - Qiita
概要 まず本記事は、Sportifyの会員でないと実装できないのでご了承ください。 会員でなくてもSportify APIを使ってみたい方は別途記事を投稿しますので、その際はご覧頂けますと幸いです。 今回はSporifyで自分がよく聴く曲を一覧表示し、 それぞれの曲の特徴（詳細については後述）を可視化しする機能を実装します。 また特徴ごとにソートできる機能も作ります。 因みにUIは今回の本題とは関係ないのでテキトーです笑 Sporify APIでは曲ごとに多くの特徴をデータとして持っています。 下記の記事で分かりやすく整理されています。 その中から曲名と再生時間に加えて下記の特徴を抽出したいと思います。 アコースティック感(0~1) 踊りやすさ(0~1) エネルギー感(0~1) ライブ感(0~1) テンポ感(BPM) それぞれ数値が高ければ高いほど、特徴が濃いということになります。 ※テン
Vue.jsで外部JSONファイルを定期的に読み込んで、動的に子供コンポーネントに表示させる - Qiita
<template> <div> <div>Child</div> <div>{{ name }}</div> <div>{{ message }}</div> </div><br> </template> <script lang="ts"> export default { name: "Child", props: [ "name",'message'], } </script> <style scoped> </style> <template> <img alt="Vue logo" src="./assets/logo.png"> <div v-for="item in items" :key="item"> <Child v-bind:message="item.message" v-bind:name="item.name"></Child> </div> </templa
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
なに？テスト駆動開発やったことないのかい？まったくキミってやつは！ - Qiita
ある日のパイセン「テスト書いておいてくれよ！」 そう言われたのだけど… ボクはテストを書いたことのなかったのさ！ どうなったかって？ Oh...ジーザス レビューで突き返されちまったよ！ そのうえリファクタリングまでされて。 最終的にパイセンのコードを見よう見まねで テストを追加していって、マージはされたんだ そこで、ボクは思ったよ テスト書けるかどうか、ボクがテストされるべきだったんだなってね！ TDD本というバイブルがあるじゃないか！ テスト駆動開発をはじめよう、という人には TDD本と呼ばれる『テスト駆動開発』というものがあるんだ！ どんな本買って？ あれはまさにバイブルさ。 （ゴシップ好きのトニーの話じゃ、今や机の引き出しに入れてるホテルもあるらしい！） さっそくボクもTDD本を読んだから、テスト駆動開発というのを、キミに教えてあげようじゃないか！ 環境は、vueCLIで、全部入れ
Vuepress BlogにJSON-LDを仕込んでみた - Qiita
きっかけ 突然ですがVuepressっていいですよね。 マークダウンとVue.jsのいいとこどりで、 簡単に記事が書けますし、レイアウトの調整もVue.jsの知識でかなりカバーできます。 WordPressなどと違って、mdファイルを手元においておけるのもうれしいです。 これでブログやマニュアルサイトを書いているのですが…… SEOにあたって、JSON-LDをつけてみようと思ったのが始まりです。 簡単にやってしまうなら 早速ググってみたところ、こんな記事を一番上に見つけました。 なんと、Frontmatterの下にscriptタグ直打ちです。 確かに簡単ではありますが、記事内でも NOTE: This is more of a hack than an official solutions, and does not guranteed to work in the future. とある
VuePress をお試ししてみた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? VuePress とは この記事は 2018-04-15 に記載されたものです。 VuePress は Vue の始祖こと Evan You 氏が新たに始めた Vue による静的サイトジェネレーターです。 Markdown によるページの作成が可能で、Vue の機能はもちろん、Webサイトを作っていてほしくなるシンタックスハイライトや、PWAのサポートがされています。 雑な解釈としては Vue 版の Gatsby という認識で良いのではないのかと思います。 VuePress の機能 公式に記載されている内容を抜粋して雑に翻訳してみました
【Nuxt】SSR・SSG・SPAにおける『nuxt build』と『nuxt generate』の実行結果の違いまとめ | Enjoy IT Life
こんにちは。Enjoy IT Life管理人の@nishina555です。 NuxtにはSSR（Server Side Rendering）、SSG（Static Site Generator）1、SPA（Single Page Application）の3種類のモードが用意されています。 また、本番環境でNuxtアプリケーションを実行するにあたりnuxt buildとnuxt generateの2つのコマンドが用意されています。 nuxt buildはアプリケーションをWebpackでビルドし、JSとCSSをミニファイするコマンド2です。ビルドファイルの出力先は.nuxt配下です。 nuxt generateは静的ウェブサイトへデプロイする静的ファイルを生成するコマンド2です。静的ファイルの出力先はdist配下です。 静的ウェブサイトのホスティングサービスではNetlifyやAmazon
Javascript, Vue.jsでスクラッチから自作カレンダーアプリケーション作成 | アールエフェクト
前回の文書通りに進めていくと下記のカレンダーをブラウザ上に描写することができるようになります。”前の月”、”次の月”ボタンを押すことで表示月とは異なる他の月のカレンダーを表示することができますがカレンダーの外枠だけでカレンダー上へのイベント表示やイベントの入力は行うことができません。 作成したカレンダー カレンダーの外枠では自作のカレンダーを作成したことにはなりません。カレンダーの外枠に加えて今回の記事ではカレンダーの必須機能である2つの機能を実装を行っていきます。 前回作成したコード 前回の記事で作成したCalendar.vueファイルの中身は下記の通りです。 <template> <h2>カレンダー{{ currentDate }}</h2> <button @click="prevMonth">前の月</button> <button @click="nextMonth">次の月</
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vueでrouterのヒストリーモードを使ってサブディレクトリで運用する