ページ遷移時のタイミングで処理をしたいpluginでページ遷移時の処理を書き、nuxt.config.jsで読み込む方法がある。 例. plugins/routerOption.js export default async ({ app,store }) => { app.router.afterEach((to, from) => { let page_name; page_name = to.name; switch(page_name){ case "privacy" : console.log("privacy page"); store.dispatch("changeTestState", true); break; case "agreement" : console.log("agreement page。"); store.dispatch("changeTestSta

WINDIIテック パスワード

ディレクトリ構成Nuxt.js, Laravel 別々にディレクトリを作成し、それぞれ個別のプロジェクトとして扱います - nuxt-project  # Nuxt.js - Nuxt のファイルたち - laravel-project  # Laravel - Laravel のファイルたちLaravel をさわるLaravel をインストール composer create-project laravel/laravel <project-name>Laravel の storage ディレクトリと bootstrap/cache ディレクトリのパーミッションを 777 に変更する ディレクトリパーミッション Laravelをインストールした後に、多少のパーミッションの設定が必要です。storage 下と bootstrap/cache ディレクトリをWebサーバから書き込み可能にして

遷移してきたときは created か mountedで 同じ画面でリンク踏んでqueryを変更する場合は beforeRouteUpdate で export default { data () { return { query: '', } }, created() { this.setQuery() }, beforeRouteUpdate(to, from, next) { next(); this.setQuery() }, methods: { setQuery() { this.query = this.$route.query.q || '' }, }, } こんな感じ ちなみにリンクの書き方はこんな感じ <nuxt-link :to="{path: '/hoge', query: {q: 'くえり'}}">くえり</nuxt-link> 参考 ナビゲーションガード | V

ぐぐると extract-text-webpack-plugin を devDependencies に追加すると治るよとか書いてあるけど治らなくて、 セットアップオプションの「PWA」を外したらエラーしなくなった。 今回はPWA使わない予定だから良いのだけども、なんだかきもちわるい。 でも同じことでお困りの人のためにメモのこしておきます。

morishitaです。 このところNuxtのSPAを作っていました。 次のエントリで紹介したものに手を入れていたのですが、このときにはテストを書いていませんでした。 tech.actindi.net 今回はちゃんとテストも書こうと思ってやってみました。 いくつかすんなり行かず試行錯誤した部分があるのでそれを書こうと思います。 Nuxt SPAのテスト SSRを含まないNuxt SPAアプリケーションの構成要素は大雑把に次を含んでいます。 コンポーネント ページコンポーネントから使われる構成要素を実装したVueのSFC1 ページコンポーネント ルーティングとひも付きページを構成するSFC Vuexストア クライアントサイドでデータを格納しデータフローを制御するモジュール PluginやMiddleware Nuxtからフックされるモジュール その他ユーティリティ的なモジュール 他のコンポー

webpack3から4に移行した時、エラーが出てハマったので、解決法をメモ。 1つ目のエラー The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D コマンドラインツールが本体と分離したからインストールしてくれとのこと。というわけで、以下を実行してコマンドラインをインストール。 npm install webpack-cli -D 2つ目のエラー DeprecationWarning: Tapable.plugin i

https://ja.nuxtjs.org/guide/typescript/ 基本的に上記の手順で設定していけばOK モジュールの追加 nuxt.config.jsのTypeScript化 nuxt-property-decoratorの導入 ESLintの設定 完成したプロジェクトは以下になります。 ご査収ください。 https://github.com/TAC/nuxt-typescript-example 環境 - version 1. モジュールの追加yarn add -D @nuxt/typescript yarn add ts-node 上記のモジュール追加後、空のtsconfig.jsonファイルを作成して、nuxtコマンドを実行するとデフォルト値で更新されます。 2. nuxt.config.jsのTypeScript化nuxt.config.jsをnuxt.config

ググって最初に見つけたのがrequireを使う方法 node.jsでjsonファイルの読み込み - Qiita var json = require('./test.json'); これでいいんだと思って進めてたんですが突如はまりました。 requireはjsonの内容が古いまま ユニットテスト書いてて、ファイルを削除してるのに、1つ目のテストのjsonオブジェクトが返ってくる。 どうやら、requireはオブジェクトをキャッシュするようだ。 この仕組みを理解しておらず、なんでだろうーなんでだろうーって結構はまりました。 jsonファイル消してるし、ファイルの内容も更新されてるし。。 fs.readFileSyncを使う もし、更新されたjsonのデータを読み込みたいみたいなときは、 キャッシュを消すか、fs.readFileSyncでデータ読み込んでjsonにする方法使えば解決。 fs.

最近本当に – プログラム関連のQ&Aをコンテンツとする – 質の低い機械翻訳と思しき日本語になってない日本語の文章 を掲載しているサイト多いなぁ……。検索ノイズになって邪魔。 – code．i-harness．com – code-examples．net – codeday．me – stackoverrun．com – kotaeta．com 等々……。 — アルム＝バンド (@Bredtn_1et) March 22, 2019 事の経緯はググりながらコードを書いていると、おそらく機械翻訳で翻訳したであろう日本語になってない日本語のQ&Aサイトがヒットして、ついドメイン名を見ずにクリックして残念な気持ちになることがここ数ヶ月続いていたことに遡ります。 何度もこうしたサイトに引っかかるとストレスになっていき、どうにかして除外できないかと思い、拡張機能を探しました。 最初はいくつかの記

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

今回は、あまり見かけないようで意外と必要になる「複数のテーブルに対して多対一で紐づくテーブル」の設計について、4つのアプローチをご紹介します。 どのようなケース？あるテーブルが複数のテーブルのいずれかに対して、自身が多、紐付き先が一で関連する場合のテーブル設計です。 例えば、「記事」と「画像」を投稿できるようなSNSを想定します。 この時、閲覧者が投稿された「記事」と「画像」のどちらにも「コメント」をつけることができる機能があったとします。 このような場合に、どのようなテーブルの設計方法があるのか、以下から説明していきます。 1.ポリモーフィック関連SQLアンチパターンにも登場するこの設計方法。「どのテーブルのどのレコード(id)に紐づくのか」という情報をテーブルに持たせてしまうという方法です。具体的には以下のような設計になります。 comments.target_tableに関連する対象