はじめに

IonicというWebとios、Android、Electron等のネイティブアプリを同じコードで作れるフレームワークのVue.js対応がα版ながら登場したらしいので、試してみました。
Ionicを使ったことがないので詳しくは知らないですが、ReactでいうところのReact Naviveみたいな感じですかね？

これまではangularにしか対応していなかったところ、Vue.jsに対応したということで話題に上がっているようです。

参考

Ionic、Vue.jsインテグレーションのαリリースを発表

やってみる

まずはvue-cliでプロジェクトを作っていきます。

vue create my-ionic-project

> Please pick a preset
default

プロジェクトに移動してionicのnpmモジュールをインストールします。

cd my-ionic-project
npm install @ionic/vue

プロジェクト内の余計なファイルを消して

rm src/assets/logo.png src/components/HelloWorld.vue

main.jsにionicのモジュールを読み込む設定を追記します。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import { Ionic } from '@ionic/vue';
Vue.use(Ionic);

new Vue({
  render: h => h(App),
}).$mount('#app')

これでionicの機能をVueの中で使えるようになったはずです。

とりあえずボタンをクリックしたらモーダルが出るようにしてみましょう。
App.vueを以下のように書き換えます。

<template>
  <ion-button shape="round" color="primary" fill="outline" @click="showModal">Show Modal</ion-button>
</template>

<script>
export default {
  name: 'app',
  methods: {
    async showModal() {
      // ボタンがクリックされたらionicのモーダルを表示
      const loading = await this.$ionic.loadingController.create({
        spinner: 'hide',
        duration: 5000,
        message: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class custom-loading'
      });
      loading.present();
    }
  }
}
</script>

<style>
</style>

動作するか見てみます。npm run serveをしてhttp://localhost:8080にアクセスしてみましょう。

とりあえずPCブラウザ上でのボタンの表示・動作が確認できました。
が、ローディングのモーダル内のアイコンが表示されていないです。CSSの設定が別途必要なんですかね？
とりあえずドキュメントもまだないですし、雰囲気だけ掴んだので先に進みます。

続いて、これをelectronでネイティブアプリ化してみます。ビルドにはionicのcliを使う必要があるらしいので、

npm install -g ionic
ionic init

としてみましたが、Project typeの選択肢にvueがありません！
ちょっと調べてみると公式GithubのissueのTODOにCreate Project Type等が挙がっていました。

こちらの記事のWhats Nextにも

While it may still be a bit early for @ionic/vue and there’s a lot more to test before we recommend it for production, we’re happy to roll this out to the community and open it up for your help.

なんで書かれていますし、冷静に考えればまだアルファ版でバージョンも0.0.1なのでとりあえずコンポーネントを動かせるようになったという段階のようですね。

終わりに

Vue.jsでネイティブアプリを構築するとなるとweexだったりvue-nativeなんかが候補として挙がることが有りましたが、今後はionicにも期待したいですね。

Vue.jsに対応したIonicを触ってみる

はじめに

参考

やってみる

終わりに