Vue Router にミドルウェア機構を実装する - Qiita
ミドルウェアとは Vue Router を使うにあたって、それぞれのルートで何かしら共通の処理を行いたい場合に、ロジックを使いまわせると便利です。使い回しが効くように切り出されたロジックをここではミドルウェアと呼んでいます。Vue Router のライフサイクルに組み込まれたフックを利用してミドルウェア機構を実装していきます。 Router の作成 import Vue from 'vue' import store from '~/store' import Meta from 'vue-meta' import routes from './routes' import Router from 'vue-router' import { sync } from 'vuex-router-sync' Vue.use(Meta) Vue.use(Router) // The middlew
Vue使いなら知っておきたいVueのパターン・小技集 - Qiita
はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」15日目の記事となります。 概要 モチベーションクラウドのフロントエンド開発では、JavaScriptのフレームワークとしてVueを採用しています。 私がモチベーションクラウドの開発にジョインしたのは2018年7月です。 それまで私はReactを使ったフロントエンド開発を2、３年ほど行なってはいたものの、Vue自体は未経験の状態でした。 今回は、そんなVue未経験だった私が、この５ヶ月弱の間に、実務や日々の学習を通して蓄積してきたVueのパターンや小技、また、Reactコミュニティーから拝借したパターンなどを簡易的なサンプルコードとともに、共有させて頂きたいと思います。 v-modelのカス
Vue 2 + composition API環境で $router を使う
背景 Vue 2 環境でも @vue/composition-api を使用することで、setup() な書き方が出来ます。 import { defineComponent, ref } from '@vue/composition-api'; export default defineComponent({ setup() { const count = ref(0); } }); ただsetup()内では、今までのようにthisにはアクセスできないため、vue-routerの$routerはそのままでは使えません。 対処方法 @vue/composition-api が提供している getCurrentInstance() を使うことで、コンポーネントのインスタンスにアクセスすることが出来ます。 （なお、同名のAPIはVue 3でも提供されています） import { getCurr
Vuestic UI — Vue.js 3.0 UI Framework
Do You Need to Migrate Your Project to Vue 3? Schedule a free call with our CTO to discuss your specific project needs. We'll assess your current setup and help you make the best decision for your business. Let's get your app ready for the future! Schedule a Call Vuestic UI is an OpenSource Vue 3 based UI framework. It is a MIT-licensed UI framework that provides ready-to-use frontend components t
Nuxt モジュールパーフェクトガイド 🍜 Nuxt.js 2.15 🍜 TypeScriptでの開発対応
Nuxt自体の動きを外部から変えたいと思ったことはありませんか? もちろん、ベタに nuxt.conf.js を弄るのもよいのですが、共通分に関しては切り分けて個別の部品として管理したいですよね。そんなときに、 モジュール が役に立ちます。 Nuxt モジュールができること モジュール は nuxt.conf.js で記述するようなビルドの動きを拡張することができます。例えば、ミドルウェアを追加したり、事前に特定のファイルを作成したいときなどに便利です。 一方で、Nuxt は混乱しやすい用語として プラグイン という仕組みが存在します。 プラグインは、Vue インスタンスと、サーバコンテキストから特定のオブジェクトを利用できるようにするために利用されるものです。 Nuxt モジュールからは、Nuxt プラグインを追加することができるので、使い分けとしては以下のようになります。 種類 用途
Laravelで運用しているサービスを Nuxt.jsにリプレイスする
PHP Conference 2020 Track4
React(SPA)での認証についてまとめ
Reactでの認証は厄介です。 Reactでコードを書いているとReduxやら外部ライブラリやら様々な「覚えること」「理解すべきこと」が出てきますが、結局ググればなんとかなることが多いです。 私がReactでアプリケーションを作るにあたって最も頭を悩ませたのが、今回取り上げる「認証」です。 認証はとにかくググっても結論が見いだせず、途方に暮れました。ネット上には様々な意見があったのですが、それらをまとめつつ私なりの結論を書いていきたいと思います。 こんな方におすすめ これからSPAの認証を学びたいという方認証について調べてみたけど、「つまり、、、どういうことだってばよ、、？」となってしまった方
Vue Composition APIで使えるリアクティブ関連のAPI一覧 - Qiita
Vue Composition APIのリファレンスを見たらリアクティブ周りのAPIが大量に追加されていたのでまとめてみました。 この記事は以下バージョン時点の情報です。 vuejs/composition-api: v1.0.0-beta.1 vuejs/vue-next: v3.0.0-beta.17 Vue Composition APIのAPI Reference に掲載されているいくつかのAPIは、まだVue2系で使えるComposition APIのプラグイン（vuejs/composition-api）でサポートされていません。 そのAPIについては マークを末尾につけています。サポート対応状況についてはこちらの記載をもとにしています。 reactive 引数に渡したオブジェクトのリアクティブなプロキシを返します。 Vue2系のVue.observable()と同等の機能です
vue-composition-apiで作るカスタムHook入門〜useHoge()を自作してみよう〜
概要 vue/composition-apiの登場によって, Vue.js でも React の Custom Hook のような関数を簡単に作成できるようになりました. 本記事では, vue/composition-apiで作る API 呼び出し用の Hook として「useApi」を紹介しながら, 作成のコツや考え方を説明していきます. また, 最後には useApi 単体でのテストコードも添付しています. Hook のテストコードが気になる方もぜひ読んでください. 対象読者 vue/composition-apiの存在は知っている, または軽く使ったことがある React の Hook の存在は知っている, または軽く使ったことがある useHoge で表される最近のフロントエンドのコードがよくわかっていない といったステータスの方に, useHoge を作成する狙いと compos
既存のVue.jsプロジェクトをVue 3へ移行したときに必要だった修正まとめ - Qiita
はじめに この記事では、「既存プロジェクトをとにかくVue3へ移行して元通り動くようにする」が目的です。 「Composition APIで書き換える」といったVue 3の新機能への移行を紹介するものではありません。 公式のマイグレーションガイドはこちら: https://v3.vuejs.org/guide/migration/introduction.html#quickstart 執筆時点ではVue3.0.0ですが、ここに書く問題は以降のバージョンで解決している可能性もあります。 もしお気づきの際はコメントいただけると幸いです。 雑感、設定やプラグイン周りで新しい仕様に合わせなければいけないところがありますが、コンポーネント資材は大部分がそのまま動作すると思います。 1日2日もあればとりあえず動作するところまでは持っていけるかと思います。 追記 2020/09/26: ドキュメントか
BASEにおけるVue.jsのこれまでとこれから - BASEプロダクトチームブログ
前書き こんにちは、BASEのフロントエンドチームでエンジニアリングマネージャーをやっている松原(@simezi9)です BASEではフロントエンドエンジニアの積極採用を行っています。 その過程で、面接を受けに来られた方によく「BASEはVueとTSを採用しているとのことですが、相性がいまいちじゃないですか？なんでVue＋TSにしてるんですか？」 という感じの質問をいただくことがあります。 この記事は、そんなBASEのフロントエンドにおける、技術・・・というよりもVue.jsに対するスタンスについて嘘偽りなく答えてみよう、という記事になります なぜVueを採用したのか、その後 過去にも「次世代の管理画面を作るフロントエンドの取り組み」というエントリでVueを採用した経緯には軽くご紹介させていただきました。 それは端的に言えば「HTML/CSSを書いてきたデザイナー陣にも見た目がとっつきやす
Vue.observable & TypeScriptで手早く安心できる状態管理を手に入れる - Qiita
Vue.jsにおける状態管理方法として何を使っているでしょうか。 dataにつっこむ ReduxとかMobXとか といった方法もありますが、もっともメジャーなものはVuexでしょう。 Vuex&TypeScriptがなかなか大変 フリーダムなフロントエンドに疲れたのか、最近はTypeScriptを採用するケースも増えているかと思います。型で保証されている安心感は一度味わうと抜けられないですよね。 しかし、実際やってみた方であれば実感するかと思いますが、VuexとTypeScriptを組み合わせるのはなかなかに大変です。 クラスコンポーネント化したVueコンポーネント内でのVuexとの接続に関しては、ktsnさんが公開されているvuex-classを利用することで可能となります（ありがたい）が、Vuex内部でのstate/getters/actions/mutationsの定義においてきっち
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
【Vue】コンポーネントでnamed exportは使えないと知った話 - Qiita
結論 Vueコンポーネントでnamed exportは使えない。 VuejsのGithub IssueでVueフレームワーク創設者のEvan Youさんが「 Vueのコンポーネントはdefault exportが必須です」とコメントしていた。 default export じゃなきゃダメ・・・ってことはつまり named export は使えないのか。と判断した話。 回答原文の一部: TL;DR: the component must be the default export and this is not going to change ストーリー はじまり JavaScriptではnamed export使った方がいいよっていう記事を拝読した。 ・ ES modulesのexport defaultは使わないほうがよい ・ JavaScriptのexport defaultアンチパタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
脳死でアップデートは危険！Vue3.0の破壊的変更点を要チェック！！ - Qiita
vorotamoroz aka きみのぶ on Twitter: "同じ事を考えてて、次の案件の技術選定に一瞬Reactを選定しそうになったけど、冷静に考えて全員のスキルセット俯瞰したときにVueだわ、となって、すんでのところで技術者の自己満足を防止した。 https://t.co/fWhmC0MtOx"
Vue.jsの子コンポーネントをリロード・再レンダリングさせる方法 - Qiita
GitHub - LinusBorg/composition-api-demos: A Vue.js app demonstarting various use cases for the new composition API
Vue.js Typed events