Skip to content

Commit bc40cfb

Browse files
soundproofbootsoundproofboot
committed
docs(vue): run linter
1 parent 6fb72c4 commit bc40cfb

File tree

6 files changed

+189
-189
lines changed

6 files changed

+189
-189
lines changed

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

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ 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-
import { createApp } from 'vue'
106-
import App from './App.vue'
105+
import { createApp } from 'vue';
106+
import App from './App.vue';
107107
import router from './router';
108108

109109
import { IonicVue } from '@ionic/vue';
@@ -142,9 +142,7 @@ import './theme/variables.css';
142142

143143
// CHANGE: Call the element loader before the createApp() call
144144
defineCustomElements(window);
145-
const app = createApp(App)
146-
.use(IonicVue)
147-
.use(router);
145+
const app = createApp(App).use(IonicVue).use(router);
148146

149147
router.isReady().then(() => {
150148
app.mount('#app');
@@ -192,8 +190,8 @@ Open `/src/views/Tab2.vue`. We see:
192190
</template>
193191

194192
<script setup lang="ts">
195-
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
196-
import ExploreContainer from '@/components/ExploreContainer.vue';
193+
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
194+
import ExploreContainer from '@/components/ExploreContainer.vue';
197195
</script>
198196
```
199197

@@ -226,9 +224,9 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
226224
</template>
227225

228226
<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';
227+
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
228+
// CHANGE: Remove or comment out ExploreContainer import.
229+
// import ExploreContainer from '@/components/ExploreContainer.vue';
232230
</script>
233231
```
234232

@@ -253,23 +251,23 @@ We'll replace it with a [floating action button](https://ionicframework.com/docs
253251
</template>
254252

255253
<script setup lang="ts">
256-
// CHANGE: Add import from `ionicons/icons`
257-
import { camera, trash, close } from 'ionicons/icons';
258-
// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
259-
import {
260-
IonPage,
261-
IonHeader,
262-
IonFab,
263-
IonFabButton,
264-
IonIcon,
265-
IonToolbar,
266-
IonTitle,
267-
IonContent,
268-
IonGrid,
269-
IonRow,
270-
IonCol,
271-
IonImg,
272-
} from '@ionic/vue';
254+
// CHANGE: Add import from `ionicons/icons`
255+
import { camera, trash, close } from 'ionicons/icons';
256+
// CHANGE: Update import from `@ionic/vue` to include necessary Ionic components
257+
import {
258+
IonPage,
259+
IonHeader,
260+
IonFab,
261+
IonFabButton,
262+
IonIcon,
263+
IonToolbar,
264+
IonTitle,
265+
IonContent,
266+
IonGrid,
267+
IonRow,
268+
IonCol,
269+
IonImg,
270+
} from '@ionic/vue';
273271
</script>
274272
```
275273

@@ -302,21 +300,21 @@ Add the FAB to the bottom of the page. Use the camera image as the icon, and cal
302300
</template>
303301

304302
<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';
303+
import { camera, trash, close } from 'ionicons/icons';
304+
import {
305+
IonPage,
306+
IonHeader,
307+
IonFab,
308+
IonFabButton,
309+
IonIcon,
310+
IonToolbar,
311+
IonTitle,
312+
IonContent,
313+
IonGrid,
314+
IonRow,
315+
IonCol,
316+
IonImg,
317+
} from '@ionic/vue';
320318
</script>
321319
```
322320

@@ -352,9 +350,9 @@ Next, open `src/views/TabsPage.vue`. Remove the `ellipse` icon from the import a
352350
</template>
353351

354352
<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';
353+
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
354+
// CHANGE: Update import by removing `ellipse` and adding `images`.
355+
import { images, square, triangle } from 'ionicons/icons';
358356
</script>
359357
```
360358

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

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -80,26 +80,26 @@ Import `usePhotoGallery` and destructure the `takePhoto` function so we can use
8080
</template>
8181

8282
<script setup lang="ts">
83-
import { camera, trash, close } from 'ionicons/icons';
84-
import {
85-
IonPage,
86-
IonHeader,
87-
IonFab,
88-
IonFabButton,
89-
IonIcon,
90-
IonToolbar,
91-
IonTitle,
92-
IonContent,
93-
IonGrid,
94-
IonRow,
95-
IonCol,
96-
IonImg,
97-
} from '@ionic/vue';
98-
// CHANGE: Add `usePhotoGallery` import.
99-
import { usePhotoGallery } from '@/composables/usePhotoGallery';
100-
101-
// CHANGE: Destructure `takePhoto` from `usePhotoGallery().
102-
const { takePhoto } = usePhotoGallery();
83+
import { camera, trash, close } from 'ionicons/icons';
84+
import {
85+
IonPage,
86+
IonHeader,
87+
IonFab,
88+
IonFabButton,
89+
IonIcon,
90+
IonToolbar,
91+
IonTitle,
92+
IonContent,
93+
IonGrid,
94+
IonRow,
95+
IonCol,
96+
IonImg,
97+
} from '@ionic/vue';
98+
// CHANGE: Add `usePhotoGallery` import.
99+
import { usePhotoGallery } from '@/composables/usePhotoGallery';
100+
101+
// CHANGE: Destructure `takePhoto` from `usePhotoGallery().
102+
const { takePhoto } = usePhotoGallery();
103103
</script>
104104
```
105105

@@ -133,7 +133,7 @@ At the top of the `usePhotoGallery` function, define an array so we can store ea
133133
export const usePhotoGallery = () => {
134134
// CHANGE: Add the `photos` array.
135135
const photos = ref<UserPhoto[]>([]);
136-
136+
137137
// other code
138138
};
139139
```
@@ -169,7 +169,7 @@ export const usePhotoGallery = () => {
169169
// CHANGE: Update return statement to include `photos` array.
170170
return {
171171
photos,
172-
takePhoto
172+
takePhoto,
173173
};
174174
};
175175
```
@@ -202,7 +202,7 @@ export const usePhotoGallery = () => {
202202

203203
return {
204204
photos,
205-
takePhoto
205+
takePhoto,
206206
};
207207
};
208208

@@ -220,26 +220,26 @@ Back in `Tab2Page.vue`, update the import statement to include the `UserPhoto` i
220220
</template>
221221

222222
<script setup lang="ts">
223-
import { camera, trash, close } from 'ionicons/icons';
224-
import {
225-
IonPage,
226-
IonHeader,
227-
IonFab,
228-
IonFabButton,
229-
IonIcon,
230-
IonToolbar,
231-
IonTitle,
232-
IonContent,
233-
IonGrid,
234-
IonRow,
235-
IonCol,
236-
IonImg,
237-
} from '@ionic/vue';
238-
// CHANGE: Update import to include `UserPhoto` interface.
239-
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
240-
241-
// CHANGE: Add `photos` array to destructure from `usePhotoGallery()`.
242-
const { photos, takePhoto } = usePhotoGallery();
223+
import { camera, trash, close } from 'ionicons/icons';
224+
import {
225+
IonPage,
226+
IonHeader,
227+
IonFab,
228+
IonFabButton,
229+
IonIcon,
230+
IonToolbar,
231+
IonTitle,
232+
IonContent,
233+
IonGrid,
234+
IonRow,
235+
IonCol,
236+
IonImg,
237+
} from '@ionic/vue';
238+
// CHANGE: Update import to include `UserPhoto` interface.
239+
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
240+
241+
// CHANGE: Add `photos` array to destructure from `usePhotoGallery()`.
242+
const { photos, takePhoto } = usePhotoGallery();
243243
</script>
244244
```
245245

@@ -278,24 +278,24 @@ With the photo(s) stored into the main array we can now display the images on th
278278
</template>
279279

280280
<script setup lang="ts">
281-
import { camera, trash, close } from 'ionicons/icons';
282-
import {
283-
IonPage,
284-
IonHeader,
285-
IonFab,
286-
IonFabButton,
287-
IonIcon,
288-
IonToolbar,
289-
IonTitle,
290-
IonContent,
291-
IonGrid,
292-
IonRow,
293-
IonCol,
294-
IonImg,
295-
} from '@ionic/vue';
296-
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
297-
298-
const { photos, takePhoto } = usePhotoGallery();
281+
import { camera, trash, close } from 'ionicons/icons';
282+
import {
283+
IonPage,
284+
IonHeader,
285+
IonFab,
286+
IonFabButton,
287+
IonIcon,
288+
IonToolbar,
289+
IonTitle,
290+
IonContent,
291+
IonGrid,
292+
IonRow,
293+
IonCol,
294+
IonImg,
295+
} from '@ionic/vue';
296+
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
297+
298+
const { photos, takePhoto } = usePhotoGallery();
299299
</script>
300300
```
301301

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ export const usePhotoGallery = () => {
3434
resolve(reader.result);
3535
};
3636
reader.readAsDataURL(blob);
37-
});
37+
});
3838

3939
return {
4040
photos,
41-
takePhoto
41+
takePhoto,
4242
};
4343
};
4444

@@ -92,7 +92,7 @@ export const usePhotoGallery = () => {
9292

9393
return {
9494
photos,
95-
takePhoto
95+
takePhoto,
9696
};
9797
};
9898

@@ -137,7 +137,7 @@ export const usePhotoGallery = () => {
137137

138138
return {
139139
photos,
140-
takePhoto
140+
takePhoto,
141141
};
142142
};
143143

@@ -180,7 +180,7 @@ export const usePhotoGallery = () => {
180180
resolve(reader.result);
181181
};
182182
reader.readAsDataURL(blob);
183-
});
183+
});
184184

185185
const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
186186
// Fetch the photo, read as a blob, then convert to base64 format
@@ -204,7 +204,7 @@ export const usePhotoGallery = () => {
204204

205205
return {
206206
photos,
207-
takePhoto
207+
takePhoto,
208208
};
209209
};
210210

0 commit comments

Comments
 (0)