Nuxt2のnuxt-linkでaria-currentの属性が設定されなかった問題について
同じURIのリンクなのに aria-currentの属性がつく場合とつかない場合があって結構悩んだのでそのメモ。 どのような問題が発生していたのか？ よくあるページネーションの実装で、1ページ目の/hoge?page=1はクエリを削除してリンクを表示していた。 ページ番号を削除したNuxtLinkにおいて aria-c…
vue
9 件の記事
2024
2021
Nuxt Composition APIのuseFetchとcomputedの問題について
Nuxt Composition APIでuseFetchとcomputedを組合わて使っていたらトラブルが。。。。 使っている@nuxtjs/composition-apiのバージョンについて こんな感じ @nuxtjs/composition-api": "0.22.0" 何が起きていたのか？ https://tw…
2020
Nuxt.js + Nuxt Compostion API + TypeScriptでmicroCMSを利用してSSGをする
jamstackが流行り始めている最近ですが、流行りに乗っかるためにNuxt.js + Nuxt CompostionAPI + TypeScriptとう環境下でmicroCMSを利用してSSGしてみた。 特に頑張るところはないんですが、TypeScriptが初心者でちょっと苦労した・・・。 サンプル 今回のサンプルは…
2019
vuex-jsonschema-validationを作っている
GitHub - polidog/vuex-jsonschema-validation: A vuex state validation plugin on change state. 作りました。 これは何をするものなかの？ vuexのstateをjson schemaを使ってvalidationするvuex-plu…
Nuxt.jsのhooksを利用してビルド時にファイルを生成する
Nuxt.jsを触っていると何かのタイミングでビルド時にファイルを生成したくなる場合があります。(あんまりないかも...) 今回は「package.jsonに書かれたバージョン番号をビルドしたdistディレクトリの中にVERSION.TXTとして含めたい。」という感じでした。 この場合Nuxtのhooksの機能をうまく…
vue-routerでbeforeEnterとwindow.locationを組み合わせて外部サイトへページ遷移させてみた
Vue Routerにはナビゲーションガードという機能があります。 ルート単位で、制御したい場合には[beforeEnter]ガードを使うことできます。 よくある一覧メニューのなかで一部だけ外部ページへ飛ばしたい場合があります。 例えば以下のような形です。 複数あるリストで、外部リンクになる可能性がある要素が混じってい…
2018
nuxtでtitleタグを動的に設定する
Nuxtでheadタグ内の設定をしたい場合は、nuxt.config.jsの中に記述します。 head: { title: 'polidog.jp' } あと、titleTemplateってのがあって head: { titleTemplate: ' | polidog.jp' } とかテンプレート設定をすることができ…
SymfonyのWebpack Encoreでvuejsを使う
Symfony使っているので、最近はフロントエンド関連なものはwebpack-encoreを使うようにしている。 んで、webpack-encoreでvuejsを使いたいたかったのでドキュメント通りに対応してみた。 Enabling Vue.js (vue-loader) (Symfony Docs) しかし、これだと…
2017
Vuexを触ってみた
普段はjQueryでガンガンコード書いている。 ちょっと前に気分転換にVuexで簡単な実装をしてみた。 vue-note-sample polidog/vuex-note-sample これはVuexの基本的な実装をためしてみたかったので作った。 coligo-io/notes-app-vuejs-vuexがv系だった…