はじめに
Nuxt.jsでCordovaが動かなくて諦めた話です。
動かないというのは具体的にはcordova run android
すると一応アプリは立ち上がるけれど、画面が真っ白のままで何も表示されない状態となります。
(cordova run browser
はちゃんと動きます。)
ただ、以下のサイトでは動かせているようなので頑張ればできるのかもしれないです。
Nuxt.jsで作成したWebサイトを簡単にCordovaアプリ化する方法
Nuxt.jsでCordovaが動かない理由
Cordovaを動かすためには、config/index.jsを以下の通り修正する必要があります。(もちろん他にも修正は必要ですが)
修正前:assetsPublicPath: '',
修正後:assetsPublicPath: '/',
※理由についてはvue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話の「vue-cliでリリース」の部分に詳しい説明があります。
config/index.jsはNuxt.jsだとnuxt.config.jsとなりますが、nuxt.config.jsではassetsPublicPathが設定できないっぽい(設定しても効かない)ので、結局Nuxt.jsでCordovaを動かすのは無理なんじゃないかと思ってます。
ちなみにNuxtコミュニティに本件に関するissueを見つけましたが回答がありませんでした。(やはり無理なのか。。?
代替案
Nuxt.jsは諦めて、こちらのVue-cliテンプレートを利用してテンプレートプロジェクトを作成し、そっちにソースを移管してCordovaを動かしました。
あとはQuasarというフレームワークがあり、こちらでもCordovaを動かすことができました。
ちなみにQuasarではハイブリッドアプリだけでなく、SPA, PWA, SSRも対応してるらしいです。
(あれ、Nuxt.jsの上位互換かな。。?
もしくはネイティブアプリでも良いという方はWeexだったりNativeScript-vueだったりも良いかもしれないです。
おわりに
Quasarがすごく気になりましたが、まだ情報が少なかったのでエラーになったら詰むと思って無難にvue-cliを選んでしまいました。
(あと独自コンポーネントが多そうだったのでブラックボックスになりすぎるのも微妙だなあという思いもあり。。
また、今回は要件の関係でハイブリッドアプリを選択しましたが、これからはPWAが盛り上がってくるはずなので基本的にはネイティブアプリ or PWA という選択肢になるんじゃないかなあと思います。
iosでもバックグラウンドプッシュ通知ができれば個人的にはPWA一択なのですが、、
それでもネイティブアプリも書けるとカッコいいのでいつかは勉強してみたいですね。
ではでは。