1. /
  2. vue.js

vue.js

Rails+Vue+VueRouterでhistoryモード時に直接表示で404エラーになってしまう対策方法

Railsでwebpackerを利用してVue.jsを取り入れた完全SPAなサイトを構築しようとして、ページのルーティングを設定するためにVueRouterを導入しました。

VueRouterでルーティングを設定すると、デフォルトで下のようなURLに「#」が追加された状態で識別されてしまいます。

 

「#」が途中に混じっているのはあまりいいとはいえないため、VueRouterに「mode: ‘history’」という設定を加えて消してあげます。

 

これで解決か・・・と思いきや、新たな問題が発生してしまいます。

ページ切り替え後のURLを直接アドレスバーに入力して読み込みをかけると、Routing Errorもしくは404エラーが発生してしまいます。

 

調べても対策方法がまちまちで結局どうすればいいか悩みましたが、自己解決（正しい直し方かは不明）したので、今回はこのエラーの原因と対策方法について紹介したいと思います。

 

前提条件

・Rails 6.0.2

・vue 2.6.11

・vue-router 3.1.3

続きを読む

【Rails6】vue.jsを使って部分SPAなフロント開発をする方法

前回の記事ではRails6環境でRailsの「webpacker」を使用せず、

フロントエンドをwebpackにそれぞれ役割分担させよう！という趣旨の記事を書きました。

少し続きまして、今回は具体的にVue.jsを使ってフロント周りをどんな感じに作っていくのかを、ディレクトリ構成と役割をメインに一つの例を紹介したいと思います。

続きを読む

【Rails6】webpackerを使わずにフロントエンドをwebpackに任せる方法

前回の記事までで、既存プロジェクトのRails5からRails6へのバージョンアップの説明は終わりましたが、今回はタイトルの通り、Railsのwebpackerを使用せず、バックエンドをRails、フロントエンドをwebpackにそれぞれ役割分担させよう！という趣旨の記事になります。

なぜwebpackerを使用しないで役割分担させる必要があるのかも含めて紹介していきます。

続きを読む

【NativeScript-vue】WebViewを使ってアプリ側とデータのやり取りをする方法

先日、NativeScript-vueで、WebViewとアプリ間でデータのやり取りってどうするんだろう？と疑問に思って実際に調査してみました。

今運営しているAnybookをアプリ化する時に、HTMLを利用したアイテム達をどうしても利用したいと考えていて、Webとアプリの間でデータ通信できたら便利だなぁという考えに至りました。（他にもいろいろ理由がありますが…）

2019年現在、NativeScript-vueの記事はとにかく少ない状況なので、上記のようなデータ通信をやりたい人の助けになればと思います。

続きを読む

NativeScript-vue入門！特徴と環境作成について

Web開発技術を利用したスマホ向けアプリのクロスプラットフォーム開発（１つのソースでAndroid / iOS両方のアプリを動かす開発方法）というと、Cordova、Monaca、ionicなどのWebViewを軸にした開発方法を思い出しますが、今回紹介する、「NativeScript-vue」は少し異なった特徴を持っています。

続きを読む

【Rails/vue.js】モデルデータをJavaScriptで取得してIDで検索できるようにする方法

バックエンドがRuby on Railsの場合に、vue.jsでデータベースのデータを操作したい場合の話です。

１レコード分だけ取得するのであれば、インスタンス変数「@で始まる変数」にそれぞれ値を入れて渡すだけでもいいのですが、複数レコード（もしくは全レコード）を一気にjavascript側に持ってきたい場合もあります。

今回はRailsの機能ベースで部分的にvue.jsを使うシチュエーションで進めていきます。

続きを読む