Skip to content

Commit 4f9b716

Browse files
brandyscarneybrandyscarney
committed
docs(vue): add build options from quickstart
1 parent 4aab3bf commit 4f9b716

File tree

6 files changed

+335
-2
lines changed

6 files changed

+335
-2
lines changed

‎docs/vue/build-options.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Vue Build Options
3+
sidebar_label: Build Options
4+
---
5+
6+
<head>
7+
<title>Vue Build Options: Component Registration and Build Configuration</title>
8+
<meta
9+
name="description"
10+
content="Learn about Vue build configuration options including component registration strategies, prefetching, and build optimization for Ionic Vue apps."
11+
/>
12+
</head>
13+
14+
import DocsCard from '@components/global/DocsCard';
15+
import DocsCards from '@components/global/DocsCards';
16+
17+
Vue gives you several tools to fine tune your application. This guide covers the build options that are most relevant to Ionic Framework.
18+
19+
## Component Registration Strategies
20+
21+
### Local Component Registration (Recommended)
22+
23+
By default, Ionic Framework components are registered locally. With local registration, these components are imported and provided to each Vue component you want to use them in. This is the recommended approach as it allows lazy loading and treeshaking to work properly with Ionic Framework components.
24+
25+
The one downside to this approach is that it may be tedious to re-import your Ionic Framework components multiple times. However, we feel that the performance benefits you receive in exchange are worth it.
26+
27+
Also note that locally registered components are not available in subcomponents. You will need to re-import the Ionic Framework components you would like to use in your subcomponent.
28+
29+
Let's take a look at how local component registration works:
30+
31+
```html
32+
<template>
33+
<ion-page>
34+
<ion-content>
35+
<SubComponent></SubComponent>
36+
</ion-content>
37+
</ion-page>
38+
</template>
39+
40+
<script setup lang="ts">
41+
import { IonContent, IonPage } from '@ionic/vue';
42+
import SubComponent from '@/components/SubComponent.vue';
43+
</script>
44+
```
45+
46+
In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. From there, we can use the components in our template.
47+
48+
Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `SubComponent` unless we register them there as well.
49+
50+
For more information, see the [Local Registration Vue Documentation](https://v3.vuejs.org/guide/component-registration.html#local-registration).
51+
52+
### Global Component Registration
53+
54+
The other option for registering components is to use global registration. Global registration involves importing the components you want to use in `main.ts` and calling the `component` method on your Vue app instance.
55+
56+
While this makes it easier to add Ionic Framework components to your Vue app, global registration often is not ideal. To quote the Vue documentation: "If you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download".
57+
58+
Let's take a look at how global component registration works:
59+
60+
**main.ts**
61+
62+
```ts
63+
import { IonContent, IonicVue, IonPage } from '@ionic/vue';
64+
65+
const app = createApp(App).use(IonicVue).use(router);
66+
67+
app.component('ion-content', IonContent);
68+
app.component('ion-page', IonPage);
69+
```
70+
71+
**MyComponent.vue**
72+
73+
```html
74+
<template>
75+
<ion-page>
76+
<ion-content>
77+
<SubComponent></SubComponent>
78+
</ion-content>
79+
</ion-page>
80+
</template>
81+
82+
<script setup lang="ts">
83+
import SubComponent from '@/components/SubComponent.vue';
84+
</script>
85+
```
86+
87+
In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue` in `main.ts`. From there, we call the `component` method on our app instance and pass it the tag name as well as the component definition. After we do that, we can use the components in the rest of our application without having to import them into each Vue component.
88+
89+
For more information, see the [Global Registration Vue Documentation](https://v3.vuejs.org/guide/component-registration.html#global-registration).
90+
91+
## Build Optimization
92+
93+
### Prefetching Application JavaScript
94+
95+
By default, the Vue CLI will automatically generate prefetch hints for the JavaScript in your application. Prefetching utilizes the browser idle time to download documents that the user might visit in the near future. When the user visits a page that requires the prefetched document, it can be served quickly from the browser's cache.
96+
97+
Prefetching consumes bandwidth, so if you have a large app, you may want to disable it. You can do this by modifying or creating your `vue.config.js` file:
98+
99+
**vue.config.js**
100+
101+
```js
102+
module.exports = {
103+
chainWebpack: (config) => {
104+
config.plugins.delete('prefetch');
105+
},
106+
};
107+
```
108+
109+
The configuration above will prevent all files from being prefetched and, instead, will be loaded when they are needed. You can also select certain chunks to prefetch. Check out the [Vue CLI Docs on Prefetching](https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch) for more examples.

‎sidebars.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ module.exports = {
6969
items: [
7070
'angular/overview',
7171
'angular/quickstart',
72-
'angular/build-options',
7372
{
7473
type: 'category',
7574
label: 'Build Your First App',
@@ -84,6 +83,7 @@ module.exports = {
8483
'angular/your-first-app/distribute',
8584
],
8685
},
86+
'angular/build-options',
8787
'angular/lifecycle',
8888
'angular/navigation',
8989
'angular/virtual-scroll',
@@ -166,6 +166,7 @@ module.exports = {
166166
'vue/your-first-app/distribute',
167167
],
168168
},
169+
'vue/build-options',
169170
'vue/lifecycle',
170171
'vue/navigation',
171172
'vue/virtual-scroll',

‎versioned_docs/version-v6/vue/build-options.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Vue Build Options
3+
sidebar_label: Build Options
4+
---
5+
6+
<head>
7+
<title>Vue Build Options: Component Registration and Build Configuration</title>
8+
<meta
9+
name="description"
10+
content="Learn about Vue build configuration options including component registration strategies, prefetching, and build optimization for Ionic Vue apps."
11+
/>
12+
</head>
13+
14+
import DocsCard from '@components/global/DocsCard';
15+
import DocsCards from '@components/global/DocsCards';
16+
17+
Vue gives you several tools to fine tune your application. This guide covers the build options that are most relevant to Ionic Framework.
18+
19+
## Component Registration Strategies
20+
21+
### Local Component Registration (Recommended)
22+
23+
By default, Ionic Framework components are registered locally. With local registration, these components are imported and provided to each Vue component you want to use them in. This is the recommended approach as it allows lazy loading and treeshaking to work properly with Ionic Framework components.
24+
25+
The one downside to this approach is that it may be tedious to re-import your Ionic Framework components multiple times. However, we feel that the performance benefits you receive in exchange are worth it.
26+
27+
Also note that locally registered components are not available in subcomponents. You will need to re-import the Ionic Framework components you would like to use in your subcomponent.
28+
29+
Let's take a look at how local component registration works:
30+
31+
```html
32+
<template>
33+
<ion-page>
34+
<ion-content>
35+
<SubComponent></SubComponent>
36+
</ion-content>
37+
</ion-page>
38+
</template>
39+
40+
<script setup lang="ts">
41+
import { IonContent, IonPage } from '@ionic/vue';
42+
import SubComponent from '@/components/SubComponent.vue';
43+
</script>
44+
```
45+
46+
In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. From there, we can use the components in our template.
47+
48+
Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `SubComponent` unless we register them there as well.
49+
50+
For more information, see the [Local Registration Vue Documentation](https://v3.vuejs.org/guide/component-registration.html#local-registration).
51+
52+
### Global Component Registration
53+
54+
The other option for registering components is to use global registration. Global registration involves importing the components you want to use in `main.ts` and calling the `component` method on your Vue app instance.
55+
56+
While this makes it easier to add Ionic Framework components to your Vue app, global registration often is not ideal. To quote the Vue documentation: "If you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download".
57+
58+
Let's take a look at how global component registration works:
59+
60+
**main.ts**
61+
62+
```ts
63+
import { IonContent, IonicVue, IonPage } from '@ionic/vue';
64+
65+
const app = createApp(App).use(IonicVue).use(router);
66+
67+
app.component('ion-content', IonContent);
68+
app.component('ion-page', IonPage);
69+
```
70+
71+
**MyComponent.vue**
72+
73+
```html
74+
<template>
75+
<ion-page>
76+
<ion-content>
77+
<SubComponent></SubComponent>
78+
</ion-content>
79+
</ion-page>
80+
</template>
81+
82+
<script setup lang="ts">
83+
import SubComponent from '@/components/SubComponent.vue';
84+
</script>
85+
```
86+
87+
In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue` in `main.ts`. From there, we call the `component` method on our app instance and pass it the tag name as well as the component definition. After we do that, we can use the components in the rest of our application without having to import them into each Vue component.
88+
89+
For more information, see the [Global Registration Vue Documentation](https://v3.vuejs.org/guide/component-registration.html#global-registration).
90+
91+
## Build Optimization
92+
93+
### Prefetching Application JavaScript
94+
95+
By default, the Vue CLI will automatically generate prefetch hints for the JavaScript in your application. Prefetching utilizes the browser idle time to download documents that the user might visit in the near future. When the user visits a page that requires the prefetched document, it can be served quickly from the browser's cache.
96+
97+
Prefetching consumes bandwidth, so if you have a large app, you may want to disable it. You can do this by modifying or creating your `vue.config.js` file:
98+
99+
**vue.config.js**
100+
101+
```js
102+
module.exports = {
103+
chainWebpack: (config) => {
104+
config.plugins.delete('prefetch');
105+
},
106+
};
107+
```
108+
109+
The configuration above will prevent all files from being prefetched and, instead, will be loaded when they are needed. You can also select certain chunks to prefetch. Check out the [Vue CLI Docs on Prefetching](https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch) for more examples.

‎versioned_docs/version-v7/vue/build-options.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Vue Build Options
3+
sidebar_label: Build Options
4+
---
5+
6+
<head>
7+
<title>Vue Build Options: Component Registration and Build Configuration</title>
8+
<meta
9+
name="description"
10+
content="Learn about Vue build configuration options including component registration strategies, prefetching, and build optimization for Ionic Vue apps."
11+
/>
12+
</head>
13+
14+
import DocsCard from '@components/global/DocsCard';
15+
import DocsCards from '@components/global/DocsCards';
16+
17+
Vue gives you several tools to fine tune your application. This guide covers the build options that are most relevant to Ionic Framework.
18+
19+
## Component Registration Strategies
20+
21+
### Local Component Registration (Recommended)
22+
23+
By default, Ionic Framework components are registered locally. With local registration, these components are imported and provided to each Vue component you want to use them in. This is the recommended approach as it allows lazy loading and treeshaking to work properly with Ionic Framework components.
24+
25+
The one downside to this approach is that it may be tedious to re-import your Ionic Framework components multiple times. However, we feel that the performance benefits you receive in exchange are worth it.
26+
27+
Also note that locally registered components are not available in subcomponents. You will need to re-import the Ionic Framework components you would like to use in your subcomponent.
28+
29+
Let's take a look at how local component registration works:
30+
31+
```html
32+
<template>
33+
<ion-page>
34+
<ion-content>
35+
<SubComponent></SubComponent>
36+
</ion-content>
37+
</ion-page>
38+
</template>
39+
40+
<script setup lang="ts">
41+
import { IonContent, IonPage } from '@ionic/vue';
42+
import SubComponent from '@/components/SubComponent.vue';
43+
</script>
44+
```
45+
46+
In the example above, we are using the `IonPage` and `IonContent` components. To use them, we import them from `@ionic/vue`. From there, we can use the components in our template.
47+
48+
Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `SubComponent` unless we register them there as well.
49+
50+
For more information, see the [Local Registration Vue Documentation](https://v3.vuejs.org/guide/component-registration.html#local-registration).
51+
52+
### Global Component Registration
53+
54+
The other option for registering components is to use global registration. Global registration involves importing the components you want to use in `main.ts` and calling the `component` method on your Vue app instance.
55+
56+
While this makes it easier to add Ionic Framework components to your Vue app, global registration often is not ideal. To quote the Vue documentation: "If you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download".
57+
58+
Let's take a look at how global component registration works:
59+
60+
**main.ts**
61+
62+
```ts
63+
import { IonContent, IonicVue, IonPage } from '@ionic/vue';
64+
65+
const app = createApp(App).use(IonicVue).use(router);
66+
67+
app.component('ion-content', IonContent);
68+
app.component('ion-page', IonPage);
69+
```
70+
71+
**MyComponent.vue**
72+
73+
```html
74+
<template>
75+
<ion-page>
76+
<ion-content>
77+
<SubComponent></SubComponent>
78+
</ion-content>
79+
</ion-page>
80+
</template>
81+
82+
<script setup lang="ts">
83+
import SubComponent from '@/components/SubComponent.vue';
84+
</script>
85+
```
86+
87+
In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue` in `main.ts`. From there, we call the `component` method on our app instance and pass it the tag name as well as the component definition. After we do that, we can use the components in the rest of our application without having to import them into each Vue component.
88+
89+
For more information, see the [Global Registration Vue Documentation](https://v3.vuejs.org/guide/component-registration.html#global-registration).
90+
91+
## Build Optimization
92+
93+
### Prefetching Application JavaScript
94+
95+
By default, the Vue CLI will automatically generate prefetch hints for the JavaScript in your application. Prefetching utilizes the browser idle time to download documents that the user might visit in the near future. When the user visits a page that requires the prefetched document, it can be served quickly from the browser's cache.
96+
97+
Prefetching consumes bandwidth, so if you have a large app, you may want to disable it. You can do this by modifying or creating your `vue.config.js` file:
98+
99+
**vue.config.js**
100+
101+
```js
102+
module.exports = {
103+
chainWebpack: (config) => {
104+
config.plugins.delete('prefetch');
105+
},
106+
};
107+
```
108+
109+
The configuration above will prevent all files from being prefetched and, instead, will be loaded when they are needed. You can also select certain chunks to prefetch. Check out the [Vue CLI Docs on Prefetching](https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch) for more examples.

‎versioned_sidebars/version-v6-sidebars.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,10 @@
386386
"collapsible": true,
387387
"collapsed": true
388388
},
389+
{
390+
"type": "doc",
391+
"id": "vue/build-options"
392+
},
389393
{
390394
"type": "doc",
391395
"id": "vue/lifecycle"

‎versioned_sidebars/version-v7-sidebars.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@
8080
"items": [
8181
"angular/overview",
8282
"angular/quickstart",
83-
"angular/build-options",
8483
{
8584
"type": "category",
8685
"label": "Build Your First App",
@@ -95,6 +94,7 @@
9594
"angular/your-first-app/distribute"
9695
]
9796
},
97+
"angular/build-options",
9898
"angular/lifecycle",
9999
"angular/navigation",
100100
"angular/virtual-scroll",
@@ -177,6 +177,7 @@
177177
"vue/your-first-app/distribute"
178178
]
179179
},
180+
"vue/build-options",
180181
"vue/lifecycle",
181182
"vue/navigation",
182183
"vue/virtual-scroll",

0 commit comments

Comments
 (0)