Vue.jsでIonic（@ionic/vue）
目次
→2020年10月 ionic-vueが正式対応したそうです。
https://i-doctor.sakura.ne.jp/font/?p=45127
Ionicは、スマホアプリ（PWAを含む）作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。
2019年4月現在、@ionic/vueはbeta版です。まだ、beta版ということもあり、v-modelが使用できないそうです。（残念、、、）
https://blog.ionicframework.com/announcing-the-ionic-vue-beta/
公式GitHub
https://github.com/ionic-team/ionic/tree/master/vue
公式Documentation
https://ionicframework.com/docs
上記Blogを写経してみたいと思います。
ソースコードとDEMOサイト
ソースコード
https://github.com/adash333/ionic4-vue-modal
DEMOサイト
https://compassionate-neumann-66e20f.netlify.com/
開発環境
Windows10Pro 1803 nvm 1.1.7 node 10.15.1 npm 6.4.1 yarn 1.13.0 ionic 4.12.0 VisualStudioCode 1.33.1
今回構築した環境
vue/cli 3.7.0
→@vue/cliでvueアプリを作成した後に、@ionic/vueとvue-routerをインストールするだけなので、CodeSandboxでも可能かもしれません。
ionic-cliのupdate(install)と@vue/cliのインストール
C:/vue/ フォルダを作成し、VisualStudioCodeで開き、Ctrl+@でターミナル画面を開きます。
ionic-cliをインストール済みの場合は、以下を入力してupdateします。
npm update -g ionic
ionic-cliをインストール未の場合は、以下を入力してインストールします。
npm install -g ionic
次に、@vue/cliをインストールします。
npm install -g @vue/cli
新規Vueアプリの作成
vue create ionic4-vue-app
Use https://registry.npm.taobao.org for faster installation?
と聞かれるので、Y+Enter
画面が変わって、さらに2回何か聞かれるので、2回ともそのままEnter
数分待ちます。
途中で以下のような感じのエラーが出ますが、待っていると、、、
以下のように完了しました。割と時間がかかります。
Vueアプリの起動
cd ionic4-vue-app yarn serve
ブラウザで、http://localhost:8080/ を開くと、以下のようになっています。
サーバを停止するときは、ターミナル画面で、Ctrl+C ⇒ y + Enterとなります。
vue-routerと、@ionic/vueの追加
vue add router yarn add @ionic/vue //または、npm install @ionic/vue
yarn serve //または、npm run serve
src/main.jsの変更
src/main.jsで、@ionic/vueとionic用のcssを読みこみます。
import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
（変更前）
（変更後）
変更して保存したら、自動更新に60秒くらいかかりました。
src/views/Home.vueの変更
以下に書き換えます。
<router-link to=“/about”>は使用できるかな？
<template>
<div class="ion-page">
<ion-header>
<ion-toolbar color="primary">
<ion-title slot="start">Hello World</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Welcome To @ionic/vue</h1>
<img alt="Vue logo" src="../assets/logo.png">
<router-link to="/about">
<ion-button color="primary" expand="full">About</ion-button>
</router-link>
</ion-content>
</div>
</template>
<script>
export default {
name: "home",
};
</script>
参考：https://ionicframework.com/docs/api/button
（変更前）
（変更後）
ボタンの部分をクリックすると、Aboutページへ移動します。
<router-link to=“/about”></router-link>は普通に使用できるようです。
src/router.jsとsrc/App.vueの変更
上記のままでもなんかよさそうな気がしなくもないのですが、ionicをちゃんと利用できるようにするためには、以下の設定を行わなければならないそうです。
src/router.jsを編集して、vue-routerのRouterではなく、@ionic/vueのIonicVueRouterを用いるように設定します。
import { IonicVueRouter } from '@ionic/vue';
Vue.use(IonicVueRouter);
export default new IonicVueRouter({
...
});
（変更前）
（変更後）
また、それに応じて、src/App.vueにおいて、<router-view />を<ion-vue-router />に変更します。
<ion-vue-router />の部分が、src/router.jsで設定したコンポーネント（Home.vueやAbout.viewなど）で置き換えられることになります。
<template>
<div id="app">
<ion-app>
<ion-vue-router />
</ion-app>
</div>
</template>
（変更前）
（変更後）
src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card)
題名と画像が左寄せになってしまったので、“<div text-center></div>“で囲んで水平方向真ん中に配置します。
src/views/Home.vueの変更
<div text-center>
<h1>Welcome To @ionic/vue</h1>
<img alt="Vue logo" src="../assets/logo.png">
</div>
Aboutページでは、Ionicのcardを使ってみたいと思います。
参考：https://ionicframework.com/docs/api/card
参考2：https://ionicframework.com/docs/v3/components/#card-image
https://ionicframework.com/docs/demos/api/card/madison.jpg から、madison.jpgをダウンロードして、src/assets/に保存します。
src/views/About.vue
<template>
<div class="ion-page">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Hello World</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<div text-center>
<h1>This is an about page</h1>
</div>
<router-link to="/">
<ion-button color="secondary" expand="full">Home</ion-button>
</router-link>
<ion-card>
<img alt="madison.jpg" src="../assets/madison.jpg">
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
<ion-card>
<ion-item href="#">
<ion-icon name="wifi" slot="start"></ion-icon>
<ion-label>Card Link Item 1</ion-label>
</ion-item>
<ion-item href="#">
<ion-icon name="wine" slot="start"></ion-icon>
<ion-label>Card Link Item 2</ion-label>
</ion-item>
<ion-item>
<ion-icon name="warning" slot="start"></ion-icon>
<ion-label>Card Button Item 1</ion-label>
</ion-item>
<ion-item>
<ion-icon name="walk" slot="start"></ion-icon>
<ion-label>Card Button Item 2</ion-label>
</ion-item>
</ion-card>
</ion-content>
</div>
</template>
<script>
export default {
name: "about"
};
</script>
画像つきカードCardを作成することができました。
ion-modalを試してみる
modalという、リンクをクリックすると一時的に出てくる画面を試してみます。
src/views/Modal.vueを新規作成し、
src/views/About.vueに”Open Modal”ボタンを設置し、そのボタンをクリックすると、Modal.vueが表示されるようにします。
参考：https://ionicframework.com/docs/api/modal
src/views/Modal.vueを新規作成
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
{{ content }}
</ion-content>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
title: { type: String, default: 'Super Modal' },
},
data() {
return {
content: 'Content',
}
},
}
</script>
src/views/About.vue
// <template>内に、
<div text-center>
<ion-button color="success" fill="outline" @click="openModal">Open Modal</ion-button>
</div>
// <script>内は、以下のように
<script>
import Modal from './modal.vue'
export default {
name: "about",
methods: {
openModal() {
return this.$ionic.modalController
.create({
component: Modal,
componentProps: {
data: {
content: 'New Content',
},
propsData: {
title: 'New title',
},
},
})
.then(m => m.present())
},
},
}
</script>
Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。
Modal画面を閉じるボタンの実装（$ionic.modalController.dismiss()）
Modal画面を閉じるボタンを設置する場合は、Modal.vueの<template>内に@click="closeModal"のようにcloseModal関数を記載し、<script>内にmethodsでcloseModal()関数を定義します。
src/views/Modal.vue
// <template>内に以下を記載
<div text-center>
<ion-button @click="closeModal">close modal</ion-button>
</div>
// <script>内に以下を記載
methods: {
closeModal() {
return this.$ionic.modalController.dismiss();
}
}
これで、Modal画面の作成と、Modal画面を閉じるボタンの実装を行うことができました。
ソースコードとDEMOサイト
ソースコード
https://github.com/adash333/ionic4-vue-modal
DEMOサイト
https://compassionate-neumann-66e20f.netlify.com/
@ionic/vueリンク
https://qiita.com/chan_kaku/items/bb894774c64c1f2fdd9b
@chan_kaku
2019年04月28日に更新
ionic/vueもβ版になったので触ってみた
https://qiita.com/chan_kaku/items/f8c0dd2a39ff6f67c65b
@chan_kaku
2018年12月26日に更新
Ionic Vueでネイティブアプリを作る
https://dev.to/paulhalliday/ionic-4-angular-vue-js-and-react-1o14
Ionic 4: Angular, Vue.js and React
paulhalliday
2019 Mar 27
→@ionic/vueがalpha版の頃の解説なので、@ionic/coreのインストールが必要になっているようです。
https://www.techiediaries.com/ionic-vue/
onic 4 Tutorial with Vue
20180215
vue-routerリンク
https://qiita.com/hshota28/items/765cf903f055754f7557
@hshota28
2019年02月25日に更新
今さら聞けない？Vue Router
ionicのcardのリンク
2019年4月現在、IonicのDocumentは、Version3の方が見やすいです。Ionic4とIonic3の違いは多少ありますが、Cardなどは、Ionic3のDocumentの方が分かりやすいです。
リンク