Skip to content

Commit 4a08306

Browse files
thetaPCthetaPC
committed
docs(vue): update your first app pages for v7
1 parent cfabe13 commit 4a08306

File tree

8 files changed

+1102
-287
lines changed

8 files changed

+1102
-287
lines changed

‎versioned_docs/version-v7/vue/your-first-app.md‎

Lines changed: 108 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ sidebar_label: Build Your First App
44
---
55

66
<head>
7-
<title>Vue Step-by-Step Tutorial: Run Your First Ionic App with Vue</title>
7+
<title>Build Your First Ionic Mobile App with Vue | Ionic Capacitor Camera</title>
88
<meta
99
name="description"
10-
content="This Vue tutorial, teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. Learn to run your first Ionic app with Vue."
10+
content="This Vue tutorial teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. Learn to run your first Ionic app with Vue."
1111
/>
1212
</head>
1313

14+
# Your First Ionic App: Vue
15+
1416
The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
1517

1618
Here’s the finished app running on all 3 platforms:
@@ -19,9 +21,9 @@ Here’s the finished app running on all 3 platforms:
1921
width="560"
2022
height="315"
2123
src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
22-
frameborder="0"
24+
frameBorder="0"
2325
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
24-
allowfullscreen
26+
allowFullScreen
2527
></iframe>
2628
2729
## What We'll Build
@@ -30,11 +32,11 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
3032

3133
Highlights include:
3234

33-
- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
35+
- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
3436
- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
35-
- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
37+
- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
3638

37-
Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-vue).
39+
Find the [complete app code](https://github.com/ionic-team/photo-gallery-capacitor-vue) referenced in this guide on GitHub.
3840

3941
## Download Required Tools
4042

@@ -43,9 +45,8 @@ Download and install these right away to ensure an optimal Ionic development exp
4345
- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
4446
- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
4547
- **Command-line interface/terminal (CLI)**:
46-
- **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
47-
CLI, running in Administrator mode.
48-
- **Mac/Linux** users, virtually any terminal will work.
48+
- **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
49+
- **Mac/Linux** users: virtually any terminal will work.
4950

5051
## Install Ionic Tooling
5152

@@ -56,7 +57,7 @@ To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
5657
:::
5758

5859
```shell
59-
npm install -g @ionic/cli@latest native-run
60+
npm install -g @ionic/cli native-run cordova-res
6061
```
6162

6263
:::note
@@ -89,29 +90,45 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
8990

9091
### PWA Elements
9192

92-
Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
93+
Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
9394

9495
It's a separate dependency, so install it next:
9596

9697
```shell
9798
npm install @ionic/pwa-elements
9899
```
99100

100-
After installation, open up the project in your code editor of choice.
101-
102101
Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
103102

104-
```tsx
105-
// Above the createApp() line
103+
```ts
104+
import { createApp } from 'vue';
105+
import App from './App.vue';
106+
import router from './router';
107+
108+
import { IonicVue } from '@ionic/vue';
109+
// CHANGE: Add the following import.
106110
import { defineCustomElements } from '@ionic/pwa-elements/loader';
111+
112+
/* Ionic styles are not shown in this example to keep it brief but will be included in the Ionic package downloaded for your app. Do not remove them. */
113+
114+
/* Theme variables */
115+
import './theme/variables.css';
116+
117+
// CHANGE: Call the element loader before the createApp() call
107118
defineCustomElements(window);
119+
120+
const app = createApp(App).use(IonicVue).use(router);
121+
122+
router.isReady().then(() => {
123+
app.mount('#app');
124+
});
108125
```
109126

110127
That’s it! Now for the fun part - let’s see the app in action.
111128

112129
## Run the App
113130

114-
Run this command in your shell:
131+
Run this command next:
115132

116133
```shell
117134
ionic serve
@@ -121,13 +138,13 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
121138

122139
## Photo Gallery!!!
123140

124-
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
141+
There are three tabs. Click on the "Tab2" tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
125142

126143
![Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.](/img/guides/vue/first-app/live-reload.gif 'Live Reload Feature in Ionic App')
127144

128-
Open `/src/views/Tab2.vue`. We see:
145+
Open `/src/views/Tab2Page.vue`. We see:
129146

130-
```html
147+
```vue
131148
<template>
132149
<ion-page>
133150
<ion-header>
@@ -146,30 +163,53 @@ Open `/src/views/Tab2.vue`. We see:
146163
</ion-content>
147164
</ion-page>
148165
</template>
166+
167+
<script setup lang="ts">
168+
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
169+
import ExploreContainer from '@/components/ExploreContainer.vue';
170+
</script>
149171
```
150172

151-
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
173+
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
152174

153-
```html
175+
```vue
154176
<ion-title>Photo Gallery</ion-title>
155177
```
156178

157-
We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. But first, remove the `ExploreContainer` component, beginning with the import statement:
179+
We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
158180

159-
```tsx
160-
import ExploreContainer from '@/components/ExploreContainer.vue';
161-
```
162-
163-
Next, remove the `ExploreContainer` node from the HTML markup in the `template`.
181+
```vue
182+
<template>
183+
<ion-page>
184+
<ion-header>
185+
<ion-toolbar>
186+
<ion-title>Photo Gallery</ion-title>
187+
</ion-toolbar>
188+
</ion-header>
189+
<ion-content :fullscreen="true">
190+
<ion-header collapse="condense">
191+
<ion-toolbar>
192+
<ion-title size="large">Photo Gallery</ion-title>
193+
</ion-toolbar>
194+
</ion-header>
164195
165-
```html
166-
<ExploreContainer name="Tab 2 page" />
167-
```
196+
<!-- CHANGE: Add the floating action button. -->
197+
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
198+
<ion-fab-button>
199+
<ion-icon :icon="camera"></ion-icon>
200+
</ion-fab-button>
201+
</ion-fab>
168202
169-
We'll replace it with a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports within the `<script setup>` tag to include the Camera icon as well as some of the Ionic components we'll use shortly:
203+
<!-- CHANGE: Remove or comment out <ExploreContainer /> -->
204+
<!-- <ExploreContainer name="Tab 2 page" /> -->
205+
</ion-content>
206+
</ion-page>
207+
</template>
170208
171-
```tsx
209+
<script setup lang="ts">
210+
// CHANGE: Add import from `ionicons/icons`
172211
import { camera, trash, close } from 'ionicons/icons';
212+
// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components.
173213
import {
174214
IonPage,
175215
IonHeader,
@@ -184,37 +224,45 @@ import {
184224
IonCol,
185225
IonImg,
186226
} from '@ionic/vue';
227+
// CHANGE: Remove or comment out the ExploreContainer import.
228+
// import ExploreContainer from '@/components/ExploreContainer.vue';
229+
</script>
187230
```
188231

189-
Since our pages are generated as [Vue Single File Components](https://vuejs.org/api/sfc-spec.html) using the [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html#script-setup) syntax these items are now exposed for use in our template.
232+
Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
190233

191-
Add the FAB to the bottom of the page. Use the camera image as the icon, and call the `takePhoto()` function when this button is clicked (to be implemented soon):
192-
193-
```html
194-
<ion-content :fullscreen="true">
195-
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
196-
<ion-fab-button @click="takePhoto()">
197-
<ion-icon :icon="camera"></ion-icon>
198-
</ion-fab-button>
199-
</ion-fab>
200-
</ion-content>
201-
```
202-
203-
We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
204-
205-
Next, open `src/views/TabsPage.vue`, remove the `ellipse` icon from the import and import the `images` icon instead:
234+
```vue
235+
<template>
236+
<ion-page>
237+
<ion-tabs>
238+
<ion-router-outlet></ion-router-outlet>
239+
<ion-tab-bar slot="bottom">
240+
<ion-tab-button tab="tab1" href="/tabs/tab1">
241+
<ion-icon aria-hidden="true" :icon="triangle" />
242+
<ion-label>Tab 1</ion-label>
243+
</ion-tab-button>
244+
245+
<ion-tab-button tab="tab2" href="/tabs/tab2">
246+
<!-- CHANGE: Update icon. -->
247+
<ion-icon aria-hidden="true" :icon="images" />
248+
<!-- CHANGE: Update label. -->
249+
<ion-label>Photos</ion-label>
250+
</ion-tab-button>
251+
252+
<ion-tab-button tab="tab3" href="/tabs/tab3">
253+
<ion-icon aria-hidden="true" :icon="square" />
254+
<ion-label>Tab 3</ion-label>
255+
</ion-tab-button>
256+
</ion-tab-bar>
257+
</ion-tabs>
258+
</ion-page>
259+
</template>
206260
207-
```tsx
261+
<script setup lang="ts">
262+
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
263+
// CHANGE: Update import by removing `ellipse` and adding `images`.
208264
import { images, square, triangle } from 'ionicons/icons';
265+
</script>
209266
```
210267

211-
Within the tab bar (`<ion-tab-bar>`), change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button:
212-
213-
```html
214-
<ion-tab-button tab="tab2" href="/tabs/tab2">
215-
<ion-icon :icon="images" />
216-
<ion-label>Photos</ion-label>
217-
</ion-tab-button>
218-
```
219-
220-
That’s just the start of all the cool things we can do with Ionic. Up next, implementing camera taking functionality on the web, then building for iOS and Android.
268+
That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.

0 commit comments

Comments
 (0)