Skip to content

Commit b78bb35

Browse files
thetaPCthetaPC
committed
docs(vue): update imports
1 parent d082cdc commit b78bb35

File tree

12 files changed

+136
-138
lines changed

12 files changed

+136
-138
lines changed

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -225,22 +225,9 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
225225
226226
<script setup lang="ts">
227227
// CHANGE: Add import from `ionicons/icons`
228-
import { camera, trash, close } from 'ionicons/icons';
228+
import { camera } from 'ionicons/icons';
229229
// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
230-
import {
231-
IonPage,
232-
IonHeader,
233-
IonFab,
234-
IonFabButton,
235-
IonIcon,
236-
IonToolbar,
237-
IonTitle,
238-
IonContent,
239-
IonGrid,
240-
IonRow,
241-
IonCol,
242-
IonImg,
243-
} from '@ionic/vue';
230+
import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
244231
// CHANGE: Remove or comment out the ExploreContainer import
245232
// import ExploreContainer from '@/components/ExploreContainer.vue';
246233
</script>

‎docs/vue/your-first-app/2-taking-photos.md‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,7 @@ Create a new file at `src/composables/usePhotoGallery.ts` and open it up.
2222
Next, define a new method, `usePhotoGallery()`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera.
2323

2424
```ts
25-
import { ref, onMounted, watch } from 'vue';
26-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
27-
import { Filesystem, Directory } from '@capacitor/filesystem';
28-
import { Preferences } from '@capacitor/preferences';
25+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
2926

3027
export const usePhotoGallery = () => {
3128
const addNewToGallery = async () => {
@@ -73,21 +70,8 @@ Next, in `Tab2Page.vue`, import the `usePhotoGallery()` method and destructure i
7370
</template>
7471
7572
<script setup lang="ts">
76-
import { camera, trash, close } from 'ionicons/icons';
77-
import {
78-
IonPage,
79-
IonHeader,
80-
IonFab,
81-
IonFabButton,
82-
IonIcon,
83-
IonToolbar,
84-
IonTitle,
85-
IonContent,
86-
IonGrid,
87-
IonRow,
88-
IonCol,
89-
IonImg,
90-
} from '@ionic/vue';
73+
import { camera } from 'ionicons/icons';
74+
import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
9175
9276
// CHANGE: Add `usePhotoGallery` import
9377
import { usePhotoGallery } from '@/composables/usePhotoGallery';
@@ -135,6 +119,10 @@ export const usePhotoGallery = () => {
135119
Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `userPhotoGallery()` return statement with the `photos` array.
136120

137121
```ts
122+
// CHANGE: Add import
123+
import { ref } from 'vue';
124+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
125+
138126
export const usePhotoGallery = () => {
139127
const photos = ref<UserPhoto[]>([]);
140128

@@ -169,10 +157,8 @@ export const usePhotoGallery = () => {
169157
`usePhotoGallery.ts` should now look like this:
170158

171159
```ts
172-
import { ref, onMounted, watch } from 'vue';
173-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
174-
import { Filesystem, Directory } from '@capacitor/filesystem';
175-
import { Preferences } from '@capacitor/preferences';
160+
import { ref } from 'vue';
161+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
176162

177163
export const usePhotoGallery = () => {
178164
const photos = ref<UserPhoto[]>([]);

‎docs/vue/your-first-app/3-saving-photos.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ We’re now able to take multiple photos and display them in a photo gallery on
1818
Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `usePhotoGallery()` method in `usePhotoGallery.ts`.
1919

2020
```ts
21-
import { ref, onMounted, watch } from 'vue';
22-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
23-
import { Filesystem, Directory } from '@capacitor/filesystem';
24-
import { Preferences } from '@capacitor/preferences';
21+
import { ref } from 'vue';
22+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
23+
// CHANGE: Add import
24+
import type { Photo } from '@capacitor/camera';
2525

2626
export const usePhotoGallery = () => {
2727
// ...existing code...
@@ -49,10 +49,9 @@ export interface UserPhoto {
4949
We can use this new method immediately in `addNewToGallery()`.
5050

5151
```ts
52-
import { ref, onMounted, watch } from 'vue';
53-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
54-
import { Filesystem, Directory } from '@capacitor/filesystem';
55-
import { Preferences } from '@capacitor/preferences';
52+
import { ref } from 'vue';
53+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
54+
import type { Photo } from '@capacitor/camera';
5655

5756
export const usePhotoGallery = () => {
5857
// ...existing code...
@@ -100,10 +99,11 @@ Then, pass the data to the Filesystem's `writeFile` method. Recall that we displ
10099
For now, create a new helper method, `convertBlobToBase64()`, to implement the necessary logic for running on the web.
101100

102101
```ts
103-
import { ref, onMounted, watch } from 'vue';
104-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
102+
import { ref } from 'vue';
103+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
104+
import type { Photo } from '@capacitor/camera';
105+
// CHANGE: Add import
105106
import { Filesystem, Directory } from '@capacitor/filesystem';
106-
import { Preferences } from '@capacitor/preferences';
107107

108108
export const usePhotoGallery = () => {
109109
// ...existing code...
@@ -156,10 +156,10 @@ export interface UserPhoto {
156156
`usePhotoGallery.ts` should now look like this:
157157

158158
```ts
159-
import { ref, onMounted, watch } from 'vue';
160-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
159+
import { ref } from 'vue';
160+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
161+
import type { Photo } from '@capacitor/camera';
161162
import { Filesystem, Directory } from '@capacitor/filesystem';
162-
import { Preferences } from '@capacitor/preferences';
163163

164164
export const usePhotoGallery = () => {
165165
const photos = ref<UserPhoto[]>([]);

‎docs/vue/your-first-app/4-loading-photos.md‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ export const usePhotoGallery = () => {
3333
Next, at the end of the `usePhotoGallery()` method, add a call to the `cachePhotos` method to save the `photos` array. By adding it here, the `photos` array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
3434

3535
```ts
36+
import { ref } from 'vue';
37+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
38+
import type { Photo } from '@capacitor/camera';
39+
import { Filesystem, Directory } from '@capacitor/filesystem';
40+
// CHANGE: Add import
41+
import { Preferences } from '@capacitor/preferences';
42+
3643
export const usePhotoGallery = () => {
3744
// ...existing code...
3845

@@ -56,6 +63,13 @@ Next, use the Vue [watch method](https://vuejs.org/api/reactivity-core.html#watc
5663
Add the call to the `watch()` method above the return statement in `usePhotoGallery()`.
5764

5865
```ts
66+
// CHANGE: Update import
67+
import { ref, watch } from 'vue';
68+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
69+
import type { Photo } from '@capacitor/camera';
70+
import { Filesystem, Directory } from '@capacitor/filesystem';
71+
import { Preferences } from '@capacitor/preferences';
72+
5973
export const usePhotoGallery = () => {
6074
// ...existing code...
6175

@@ -125,8 +139,9 @@ export const usePhotoGallery = () => {
125139
`usePhotoGallery.ts` should now look like this:
126140

127141
```ts
128-
import { ref, onMounted, watch } from 'vue';
129-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
142+
import { ref, watch } from 'vue';
143+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
144+
import type { Photo } from '@capacitor/camera';
130145
import { Filesystem, Directory } from '@capacitor/filesystem';
131146
import { Preferences } from '@capacitor/preferences';
132147

@@ -221,8 +236,10 @@ Our `usePhotoGallery()` can now load the saved images, but we'll need to update
221236
Update `usePhotoGallery.ts` to look like the following:
222237

223238
```ts
224-
import { ref, onMounted, watch } from 'vue';
225-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
239+
// CHANGE: Update import
240+
import { ref, watch, onMounted } from 'vue';
241+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
242+
import type { Photo } from '@capacitor/camera';
226243
import { Filesystem, Directory } from '@capacitor/filesystem';
227244
import { Preferences } from '@capacitor/preferences';
228245

‎docs/vue/your-first-app/5-adding-mobile.md‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ Import the Ionic [Platform API](../platform.md) into `usePhotoGallery.ts`, which
2222
Add `Platform` to the imports at the top of the file to use the `isPlatform` method.
2323

2424
```ts
25-
import { ref, onMounted, watch } from 'vue';
26-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
25+
import { ref, watch, onMounted } from 'vue';
26+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
27+
import type { Photo } from '@capacitor/camera';
2728
import { Filesystem, Directory } from '@capacitor/filesystem';
2829
import { Preferences } from '@capacitor/preferences';
2930
// CHANGE: Add imports
@@ -75,7 +76,16 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
7576
When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `usePhotoGallery.ts`.
7677

7778
```ts
79+
import { ref, watch, onMounted } from 'vue';
80+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
81+
import type { Photo } from '@capacitor/camera';
82+
import { Filesystem, Directory } from '@capacitor/filesystem';
83+
import { Preferences } from '@capacitor/preferences';
84+
import { isPlatform } from '@ionic/vue';
85+
// CHANGE: Add import
7886
import { Capacitor } from '@capacitor/core';
87+
88+
// ...existing code...
7989
```
8090

8191
Then update `savePicture()` to look like the following:
@@ -153,8 +163,9 @@ Our Photo Gallery now consists of one codebase that runs on the web, Android, an
153163
`usePhotoGallery.ts` should now look like this:
154164

155165
```ts
156-
import { ref, onMounted, watch } from 'vue';
157-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
166+
import { ref, watch, onMounted } from 'vue';
167+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
168+
import type { Photo } from '@capacitor/camera';
158169
import { Filesystem, Directory } from '@capacitor/filesystem';
159170
import { Preferences } from '@capacitor/preferences';
160171
import { isPlatform } from '@ionic/vue';

‎docs/vue/your-first-app/7-live-reload.md‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,9 @@ With Live Reload running and the app open on your device, let’s implement phot
3838
In `usePhotoGallery.ts`, add the `deletePhoto()` method. The selected photo is removed from the `photos` array first. Then, we delete the actual photo file itself using the Filesystem API.
3939

4040
```ts
41-
import { ref, onMounted, watch } from 'vue';
42-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
41+
import { ref, watch, onMounted } from 'vue';
42+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
43+
import type { Photo } from '@capacitor/camera';
4344
import { Filesystem, Directory } from '@capacitor/filesystem';
4445
import { Preferences } from '@capacitor/preferences';
4546
import { isPlatform } from '@ionic/vue';
@@ -84,7 +85,9 @@ Next, in `Tab2Page.vue`, implement the `showActionSheet()` method. We're adding
8485
<!-- ...existing code... -->
8586
8687
<script setup lang="ts">
88+
// CHANGE: Update import
8789
import { camera, trash, close } from 'ionicons/icons';
90+
// CHANGE: Update import
8891
import {
8992
IonPage,
9093
IonHeader,
@@ -94,11 +97,6 @@ import {
9497
IonToolbar,
9598
IonTitle,
9699
IonContent,
97-
IonGrid,
98-
IonRow,
99-
IonCol,
100-
IonImg,
101-
// CHANGE: Add the `actionSheetController` import
102100
actionSheetController,
103101
} from '@ionic/vue';
104102

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -225,22 +225,9 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
225225
226226
<script setup lang="ts">
227227
// CHANGE: Add import from `ionicons/icons`
228-
import { camera, trash, close } from 'ionicons/icons';
228+
import { camera } from 'ionicons/icons';
229229
// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
230-
import {
231-
IonPage,
232-
IonHeader,
233-
IonFab,
234-
IonFabButton,
235-
IonIcon,
236-
IonToolbar,
237-
IonTitle,
238-
IonContent,
239-
IonGrid,
240-
IonRow,
241-
IonCol,
242-
IonImg,
243-
} from '@ionic/vue';
230+
import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
244231
// CHANGE: Remove or comment out the ExploreContainer import
245232
// import ExploreContainer from '@/components/ExploreContainer.vue';
246233
</script>

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

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,7 @@ Create a new file at `src/composables/usePhotoGallery.ts` and open it up.
2222
Next, define a new method, `usePhotoGallery()`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera.
2323

2424
```ts
25-
import { ref, onMounted, watch } from 'vue';
26-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
27-
import { Filesystem, Directory } from '@capacitor/filesystem';
28-
import { Preferences } from '@capacitor/preferences';
25+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
2926

3027
export const usePhotoGallery = () => {
3128
const addNewToGallery = async () => {
@@ -43,7 +40,7 @@ export const usePhotoGallery = () => {
4340
};
4441
```
4542

46-
Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto(` - that will open up the device's camera and allow us to take photos.
43+
Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto()` - that will open up the device's camera and allow us to take photos.
4744

4845
Next, in `Tab2Page.vue`, import the `usePhotoGallery()` method and destructure it to call its `addNewToGallery()` method.
4946

@@ -73,21 +70,8 @@ Next, in `Tab2Page.vue`, import the `usePhotoGallery()` method and destructure i
7370
</template>
7471
7572
<script setup lang="ts">
76-
import { camera, trash, close } from 'ionicons/icons';
77-
import {
78-
IonPage,
79-
IonHeader,
80-
IonFab,
81-
IonFabButton,
82-
IonIcon,
83-
IonToolbar,
84-
IonTitle,
85-
IonContent,
86-
IonGrid,
87-
IonRow,
88-
IonCol,
89-
IonImg,
90-
} from '@ionic/vue';
73+
import { camera } from 'ionicons/icons';
74+
import { IonPage, IonHeader, IonFab, IonFabButton, IonIcon, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
9175
9276
// CHANGE: Add `usePhotoGallery` import
9377
import { usePhotoGallery } from '@/composables/usePhotoGallery';
@@ -135,6 +119,10 @@ export const usePhotoGallery = () => {
135119
Over in the `addNewToGallery()` method, add the newly captured photo to the beginning of the `photos` array. Then, update the `userPhotoGallery()` return statement with the `photos` array.
136120

137121
```ts
122+
// CHANGE: Add import
123+
import { ref } from 'vue';
124+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
125+
138126
export const usePhotoGallery = () => {
139127
const photos = ref<UserPhoto[]>([]);
140128

@@ -146,9 +134,9 @@ export const usePhotoGallery = () => {
146134
quality: 100,
147135
});
148136

149-
// CHANGE: Create the `fileName` with current timestamp.
137+
// CHANGE: Create the `fileName` with current timestamp
150138
const fileName = Date.now() + '.jpeg';
151-
// CHANGE: Create `savedImageFile` matching `UserPhoto` interface.
139+
// CHANGE: Create `savedImageFile` matching `UserPhoto` interface
152140
const savedImageFile = {
153141
filepath: fileName,
154142
webviewPath: capturedPhoto.webPath,
@@ -169,10 +157,8 @@ export const usePhotoGallery = () => {
169157
`usePhotoGallery.ts` should now look like this:
170158

171159
```ts
172-
import { ref, onMounted, watch } from 'vue';
173-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
174-
import { Filesystem, Directory } from '@capacitor/filesystem';
175-
import { Preferences } from '@capacitor/preferences';
160+
import { ref } from 'vue';
161+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
176162

177163
export const usePhotoGallery = () => {
178164
const photos = ref<UserPhoto[]>([]);

0 commit comments

Comments
 (0)