Skip to content

Commit c152d58

Browse files
soundproofbootsoundproofboot
committed
docs(vue): add context to code blocks small change to surrounding text in your first app page 1
1 parent 07cf4f2 commit c152d58

File tree

1 file changed

+170
-29
lines changed

1 file changed

+170
-29
lines changed

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

Lines changed: 170 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,53 @@ After installation, open up the project in your code editor of choice.
102102
Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
103103

104104
```tsx
105-
// Above the createApp() line
105+
import { createApp } from 'vue'
106+
import App from './App.vue'
107+
import router from './router';
108+
109+
import { IonicVue } from '@ionic/vue';
110+
// CHANGE: Add the following import.
106111
import { defineCustomElements } from '@ionic/pwa-elements/loader';
112+
113+
/* Core CSS required for Ionic components to work properly */
114+
import '@ionic/vue/css/core.css';
115+
116+
/* Basic CSS for apps built with Ionic */
117+
import '@ionic/vue/css/normalize.css';
118+
import '@ionic/vue/css/structure.css';
119+
import '@ionic/vue/css/typography.css';
120+
121+
/* Optional CSS utils that can be commented out */
122+
import '@ionic/vue/css/padding.css';
123+
import '@ionic/vue/css/float-elements.css';
124+
import '@ionic/vue/css/text-alignment.css';
125+
import '@ionic/vue/css/text-transformation.css';
126+
import '@ionic/vue/css/flex-utils.css';
127+
import '@ionic/vue/css/display.css';
128+
129+
/**
130+
* Ionic Dark Mode
131+
* -----------------------------------------------------
132+
* For more info, please see:
133+
* https://ionicframework.com/docs/theming/dark-mode
134+
*/
135+
136+
/* @import '@ionic/vue/css/palettes/dark.always.css'; */
137+
/* @import '@ionic/vue/css/palettes/dark.class.css'; */
138+
import '@ionic/vue/css/palettes/dark.system.css';
139+
140+
/* Theme variables */
141+
import './theme/variables.css';
142+
143+
// CHANGE: Call the element loader before the createApp() call
107144
defineCustomElements(window);
145+
const app = createApp(App)
146+
.use(IonicVue)
147+
.use(router);
148+
149+
router.isReady().then(() => {
150+
app.mount('#app');
151+
});
108152
```
109153

110154
That’s it! Now for the fun part - let’s see the app in action.
@@ -146,30 +190,72 @@ Open `/src/views/Tab2.vue`. We see:
146190
</ion-content>
147191
</ion-page>
148192
</template>
193+
194+
<script setup lang="ts">
195+
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
196+
import ExploreContainer from '@/components/ExploreContainer.vue';
197+
</script>
149198
```
150199

151-
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
200+
`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](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both `ion-title` elements to:
152201

153202
```html
154203
<ion-title>Photo Gallery</ion-title>
155204
```
156205

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:
158-
159-
```tsx
160-
import ExploreContainer from '@/components/ExploreContainer.vue';
161-
```
162-
163-
Next, remove the `ExploreContainer` node from the HTML markup in the `template`.
206+
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 both the `ExploreContainer` component and its import statement:
164207

165208
```html
166-
<ExploreContainer name="Tab 2 page" />
209+
<template>
210+
<ion-page>
211+
<ion-header>
212+
<ion-toolbar>
213+
<ion-title>Photo Gallery</ion-title>
214+
</ion-toolbar>
215+
</ion-header>
216+
<ion-content :fullscreen="true">
217+
<ion-header collapse="condense">
218+
<ion-toolbar>
219+
<ion-title size="large">Photo Gallery</ion-title>
220+
</ion-toolbar>
221+
</ion-header>
222+
<!-- CHANGE: Remove or comment out <ExploreContainer /> -->
223+
<!-- <ExploreContainer name="Tab 2 page" /> -->
224+
</ion-content>
225+
</ion-page>
226+
</template>
227+
228+
<script setup lang="ts">
229+
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
230+
// CHANGE: Remove or comment out ExploreContainer import.
231+
// import ExploreContainer from '@/components/ExploreContainer.vue';
232+
</script>
167233
```
168234

169235
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:
170236

171-
```tsx
237+
```html
238+
<template>
239+
<ion-page>
240+
<ion-header>
241+
<ion-toolbar>
242+
<ion-title>Photo Gallery</ion-title>
243+
</ion-toolbar>
244+
</ion-header>
245+
<ion-content :fullscreen="true">
246+
<ion-header collapse="condense">
247+
<ion-toolbar>
248+
<ion-title size="large">Photo Gallery</ion-title>
249+
</ion-toolbar>
250+
</ion-header>
251+
</ion-content>
252+
</ion-page>
253+
</template>
254+
255+
<script setup lang="ts">
256+
// CHANGE: Add import from `ionicons/icons`
172257
import { camera, trash, close } from 'ionicons/icons';
258+
// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
173259
import {
174260
IonPage,
175261
IonHeader,
@@ -184,37 +270,92 @@ import {
184270
IonCol,
185271
IonImg,
186272
} from '@ionic/vue';
273+
</script>
187274
```
188275

189276
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.
190277

191278
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):
192279

193280
```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>
281+
<template>
282+
<ion-page>
283+
<ion-header>
284+
<ion-toolbar>
285+
<ion-title>Photo Gallery</ion-title>
286+
</ion-toolbar>
287+
</ion-header>
288+
<ion-content :fullscreen="true">
289+
<ion-header collapse="condense">
290+
<ion-toolbar>
291+
<ion-title size="large">Photo Gallery</ion-title>
292+
</ion-toolbar>
293+
</ion-header>
294+
<!-- CHANGE: Add the floating action button. -->
295+
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
296+
<ion-fab-button @click="takePhoto()">
297+
<ion-icon :icon="camera"></ion-icon>
298+
</ion-fab-button>
299+
</ion-fab>
300+
</ion-content>
301+
</ion-page>
302+
</template>
303+
304+
<script setup lang="ts">
305+
import { camera, trash, close } from 'ionicons/icons';
306+
import {
307+
IonPage,
308+
IonHeader,
309+
IonFab,
310+
IonFabButton,
311+
IonIcon,
312+
IonToolbar,
313+
IonTitle,
314+
IonContent,
315+
IonGrid,
316+
IonRow,
317+
IonCol,
318+
IonImg,
319+
} from '@ionic/vue';
320+
</script>
201321
```
202322

203323
We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
204324

205-
Next, open `src/views/TabsPage.vue`, remove the `ellipse` icon from the import and import the `images` icon instead:
206-
207-
```tsx
208-
import { images, square, triangle } from 'ionicons/icons';
209-
```
210-
211-
Within the tab bar (`<ion-tab-bar>`), change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button:
325+
Next, open `src/views/TabsPage.vue`. Remove the `ellipse` icon from the import and import the `images` icon instead. Then, within the tab bar (`<ion-tab-bar>`), change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button:
212326

213327
```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>
328+
<template>
329+
<ion-page>
330+
<ion-tabs>
331+
<ion-router-outlet></ion-router-outlet>
332+
<ion-tab-bar slot="bottom">
333+
<ion-tab-button tab="tab1" href="/tabs/tab1">
334+
<ion-icon aria-hidden="true" :icon="triangle" />
335+
<ion-label>Tab 1</ion-label>
336+
</ion-tab-button>
337+
338+
<ion-tab-button tab="tab2" href="/tabs/tab2">
339+
<!-- CHANGE: Replace `ellipse` icon with `images` -->
340+
<ion-icon aria-hidden="true" :icon="images" />
341+
<!-- CHANGE: Update `tab2` label to `Photos` -->
342+
<ion-label>Photos</ion-label>
343+
</ion-tab-button>
344+
345+
<ion-tab-button tab="tab3" href="/tabs/tab3">
346+
<ion-icon aria-hidden="true" :icon="square" />
347+
<ion-label>Tab 3</ion-label>
348+
</ion-tab-button>
349+
</ion-tab-bar>
350+
</ion-tabs>
351+
</ion-page>
352+
</template>
353+
354+
<script setup lang="ts">
355+
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
356+
// CHANGE: Update import by removing `ellipse` and adding `images`.
357+
import { images, square, triangle } from 'ionicons/icons';
358+
</script>
218359
```
219360

220361
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.

0 commit comments

Comments
 (0)