Skip to content

Commit 9673530

Browse files
soundproofbootthetaPCbrandyscarney
authored
docs(vue): show complete code context in the "Your First App" tutorial (#4197)
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
1 parent 2c710c8 commit 9673530

16 files changed

+2307
-671
lines changed

‎docs/vue/your-first-app.md‎

Lines changed: 110 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ 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

@@ -30,11 +30,11 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
3030

3131
Highlights include:
3232

33-
- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
33+
- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
3434
- 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.
35+
- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
3636

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

3939
## Download Required Tools
4040

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

5049
## Install Ionic Tooling
5150

@@ -56,7 +55,7 @@ To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
5655
:::
5756

5857
```shell
59-
npm install -g @ionic/cli@latest native-run
58+
npm install -g @ionic/cli native-run cordova-res
6059
```
6160

6261
:::note
@@ -89,45 +88,61 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
8988

9089
### PWA Elements
9190

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).
91+
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).
9392

9493
It's a separate dependency, so install it next:
9594

9695
```shell
9796
npm install @ionic/pwa-elements
9897
```
9998

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

104-
```tsx
105-
// Above the createApp() line
101+
```ts
102+
import { createApp } from 'vue';
103+
import App from './App.vue';
104+
import router from './router';
105+
106+
import { IonicVue } from '@ionic/vue';
107+
// CHANGE: Add the following import
106108
import { defineCustomElements } from '@ionic/pwa-elements/loader';
109+
110+
/* ...existing Ionic styles... */
111+
112+
/* Theme variables */
113+
import './theme/variables.css';
114+
115+
// CHANGE: Call the element loader before the createApp() call
107116
defineCustomElements(window);
117+
118+
const app = createApp(App).use(IonicVue).use(router);
119+
120+
router.isReady().then(() => {
121+
app.mount('#app');
122+
});
108123
```
109124

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

112127
## Run the App
113128

114-
Run this command in your shell:
129+
Run this command next:
115130

116131
```shell
117132
ionic serve
118133
```
119134

120135
And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
121136

122-
## Photo Gallery!!!
137+
## Photo Gallery
123138

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!
139+
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!
125140

126141
![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')
127142

128-
Open `/src/views/Tab2.vue`. We see:
143+
Open `/src/views/Tab2Page.vue`. We see:
129144

130-
```html
145+
```vue
131146
<template>
132147
<ion-page>
133148
<ion-header>
@@ -146,94 +161,112 @@ Open `/src/views/Tab2.vue`. We see:
146161
</ion-content>
147162
</ion-page>
148163
</template>
164+
165+
<script setup lang="ts">
166+
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
167+
import ExploreContainer from '@/components/ExploreContainer.vue';
168+
</script>
149169
```
150170

151-
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
171+
`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:
152172

153-
```html
173+
```vue
154174
<template>
155175
<ion-page>
156176
<ion-header>
157177
<ion-toolbar>
158-
<!-- CHANGE: Update title. -->
178+
<!-- CHANGE: Update title -->
159179
<ion-title>Photo Gallery</ion-title>
160180
</ion-toolbar>
161181
</ion-header>
162182
<ion-content :fullscreen="true">
163183
<ion-header collapse="condense">
164184
<ion-toolbar>
165-
<!-- CHANGE: Update title. -->
185+
<!-- CHANGE: Update title -->
166186
<ion-title size="large">Photo Gallery</ion-title>
167187
</ion-toolbar>
168188
</ion-header>
169189
170-
<ExploreContainer name="Tab 2 page" />
190+
<!-- ...existing code... -->
171191
</ion-content>
172192
</ion-page>
173193
</template>
174194
```
175195

176-
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:
196+
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.
177197

178-
```tsx
179-
import ExploreContainer from '@/components/ExploreContainer.vue';
180-
```
181-
182-
Next, remove the `ExploreContainer` node from the HTML markup in the `template`.
183-
184-
```html
185-
<ExploreContainer name="Tab 2 page" />
186-
```
187-
188-
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:
189-
190-
```tsx
191-
import { camera, trash, close } from 'ionicons/icons';
192-
import {
193-
IonPage,
194-
IonHeader,
195-
IonFab,
196-
IonFabButton,
197-
IonIcon,
198-
IonToolbar,
199-
IonTitle,
200-
IonContent,
201-
IonGrid,
202-
IonRow,
203-
IonCol,
204-
IonImg,
205-
} from '@ionic/vue';
206-
```
198+
```vue
199+
<template>
200+
<ion-page>
201+
<ion-header>
202+
<ion-toolbar>
203+
<ion-title>Photo Gallery</ion-title>
204+
</ion-toolbar>
205+
</ion-header>
206+
<ion-content :fullscreen="true">
207+
<ion-header collapse="condense">
208+
<ion-toolbar>
209+
<ion-title size="large">Photo Gallery</ion-title>
210+
</ion-toolbar>
211+
</ion-header>
207212
208-
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.
213+
<!-- CHANGE: Add the floating action button -->
214+
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
215+
<ion-fab-button>
216+
<ion-icon :icon="camera"></ion-icon>
217+
</ion-fab-button>
218+
</ion-fab>
209219
210-
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):
220+
<!-- CHANGE: Remove or comment out <ExploreContainer /> -->
221+
<!-- <ExploreContainer name="Tab 2 page" /> -->
222+
</ion-content>
223+
</ion-page>
224+
</template>
211225
212-
```html
213-
<ion-content :fullscreen="true">
214-
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
215-
<ion-fab-button @click="takePhoto()">
216-
<ion-icon :icon="camera"></ion-icon>
217-
</ion-fab-button>
218-
</ion-fab>
219-
</ion-content>
226+
<script setup lang="ts">
227+
// CHANGE: Add import from `ionicons/icons`
228+
import { camera } from 'ionicons/icons';
229+
// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
230+
import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
231+
// CHANGE: Remove or comment out the ExploreContainer import
232+
// import ExploreContainer from '@/components/ExploreContainer.vue';
233+
</script>
220234
```
221235

222-
We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
236+
Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
223237

224-
Next, open `src/views/TabsPage.vue`, remove the `ellipse` icon from the import and import the `images` icon instead:
238+
```vue
239+
<template>
240+
<ion-page>
241+
<ion-tabs>
242+
<ion-router-outlet></ion-router-outlet>
243+
<ion-tab-bar slot="bottom">
244+
<ion-tab-button tab="tab1" href="/tabs/tab1">
245+
<ion-icon aria-hidden="true" :icon="triangle" />
246+
<ion-label>Tab 1</ion-label>
247+
</ion-tab-button>
248+
249+
<ion-tab-button tab="tab2" href="/tabs/tab2">
250+
<!-- CHANGE: Update icon -->
251+
<ion-icon aria-hidden="true" :icon="images" />
252+
<!-- CHANGE: Update label -->
253+
<ion-label>Photos</ion-label>
254+
</ion-tab-button>
255+
256+
<ion-tab-button tab="tab3" href="/tabs/tab3">
257+
<ion-icon aria-hidden="true" :icon="square" />
258+
<ion-label>Tab 3</ion-label>
259+
</ion-tab-button>
260+
</ion-tab-bar>
261+
</ion-tabs>
262+
</ion-page>
263+
</template>
225264
226-
```tsx
265+
<script setup lang="ts">
266+
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
267+
// CHANGE: Update import by removing `ellipse` and adding `images`
227268
import { images, square, triangle } from 'ionicons/icons';
269+
</script>
228270
```
229271

230-
Within the tab bar (`<ion-tab-bar>`), change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button:
231-
232-
```html
233-
<ion-tab-button tab="tab2" href="/tabs/tab2">
234-
<ion-icon :icon="images" />
235-
<ion-label>Photos</ion-label>
236-
</ion-tab-button>
237-
```
238-
239-
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.
272+
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)