Skip to content

Commit b35e544

Browse files
brandyscarneybrandyscarney
committed
docs(intro): update packages & cdn docs to link packages to other guides
1 parent 4e7dbc5 commit b35e544

File tree

1 file changed

+52
-116
lines changed

1 file changed

+52
-116
lines changed

‎docs/intro/cdn.md‎

Lines changed: 52 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,94 @@
11
---
2-
title: Ionic Packages
2+
title: Ionic Packages & CDN
33
sidebar_label: Packages & CDN
44
---
55

66
<head>
7-
<title>Ionic Framework Packages: CDN, Angular, Vue, and React</title>
7+
<title>Ionic Framework Packages: CDN, Angular, Vue, React, and JavaScript</title>
88
<meta
99
name="description"
10-
content="View our different packages that can be used to quickly start using Ionic Framework or Ionicons CDN in a test environment, Angular, Vue, React, or none at all."
10+
content="View our different packages that can be used to quickly start using Ionic Framework or Ionicons CDN in a test environment, Angular, Vue, React, or JavaScript."
1111
/>
1212
</head>
1313

14-
Ionic provides different packages that can be used to quickly get started using Ionic Framework or Ionicons in a test environment, Angular, any other framework, or none at all.
14+
import DocsCard from '@components/global/DocsCard';
15+
import DocsCards from '@components/global/DocsCards';
1516

16-
## Ionic Framework CDN
17+
Ionic Framework offers npm packages for Angular, React, Vue, and JavaScript, plus CDN links for quick prototyping. Choose your framework below to get started, or use the CDN to test Ionic Framework components in the browser.
1718

18-
Ionic Framework can be included from a CDN for quick testing in a [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor!
19+
## Ionic Angular
1920

20-
It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `<head>` element in an HTML file, or where external assets are included in the online code editor:
21+
Start a new Ionic Angular app or add Ionic to your existing Angular project.
2122

22-
```html
23-
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
24-
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
25-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
26-
```
23+
<DocsCards>
2724

28-
With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets).
25+
<DocsCard header="New Angular Project" href="../angular/quickstart" iconset="/icons/logo-angular-icon.png,/icons/guide-quickstart-icon.png">
26+
<p>Create a new Ionic Angular app using the Ionic CLI.</p>
27+
</DocsCard>
2928

30-
:::note
31-
This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework.
32-
:::
29+
<DocsCard header="Existing Angular Project" href="../angular/add-to-existing" iconset="/icons/logo-angular-icon.png,/icons/guide-package-icon.png">
30+
<p>Add Ionic Angular to an existing Angular project.</p>
31+
</DocsCard>
3332

34-
## Ionic + Angular
33+
</DocsCards>
3534

36-
When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.md#npm). This comes with all of the Ionic Framework components and Angular specific services and features.
35+
## Ionic React
3736

38-
```shell
39-
npm install @ionic/angular@latest --save
40-
```
37+
Start a new Ionic React app or add Ionic to your existing React project.
4138

42-
Each time there is a new Ionic Framework release, this [version](../reference/versioning.md) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well.
39+
<DocsCards>
4340

44-
For adding Ionic to an already existing Angular project, use the Angular CLI's `ng add` feature.
41+
<DocsCard header="New React Project" href="../react/quickstart" iconset="/icons/logo-react-icon.png,/icons/guide-quickstart-icon.png">
42+
<p>Create a new Ionic React app using the Ionic CLI.</p>
43+
</DocsCard>
4544

46-
```shell
47-
ng add @ionic/angular
48-
```
45+
<DocsCard header="Existing React Project" href="../react/add-to-existing" iconset="/icons/logo-react-icon.png,/icons/guide-package-icon.png">
46+
<p>Add Ionic React to an existing React project.</p>
47+
</DocsCard>
4948

50-
This will add the necessary imports to the `@ionic/angular` package as well as add the styles needed.
49+
</DocsCards>
5150

52-
## Ionic + React
51+
## Ionic Vue
5352

54-
To add Ionic Framework to an already existing React project, install the `@ionic/react` and `@ionic/react-router` package.
53+
Start a new Ionic Vue app or add Ionic to your existing Vue project.
5554

56-
```shell
57-
$ npm install @ionic/react
58-
$ npm install @ionic/react-router
59-
```
60-
61-
### CSS
55+
<DocsCards>
6256

63-
To include the necessary CSS in a React project, add the following to the root App component.
57+
<DocsCard header="New Vue Project" href="../vue/quickstart" iconset="/icons/logo-vue-icon.png,/icons/guide-quickstart-icon.png">
58+
<p>Create a new Ionic Vue app using the Ionic CLI.</p>
59+
</DocsCard>
6460

65-
```javascript
66-
/* Core CSS required for Ionic components to work properly */
67-
import '@ionic/react/css/core.css';
61+
<DocsCard header="Existing Vue Project" href="../vue/add-to-existing" iconset="/icons/logo-vue-icon.png,/icons/guide-package-icon.png">
62+
<p>Add Ionic Vue to an existing Vue project.</p>
63+
</DocsCard>
6864

69-
/* Basic CSS for apps built with Ionic */
70-
import '@ionic/react/css/normalize.css';
71-
import '@ionic/react/css/structure.css';
72-
import '@ionic/react/css/typography.css';
65+
</DocsCards>
7366

74-
/* Optional CSS utils that can be commented out */
75-
import '@ionic/react/css/padding.css';
76-
import '@ionic/react/css/float-elements.css';
77-
import '@ionic/react/css/text-alignment.css';
78-
import '@ionic/react/css/text-transformation.css';
79-
import '@ionic/react/css/flex-utils.css';
80-
import '@ionic/react/css/display.css';
81-
```
67+
## Ionic JavaScript
8268

83-
## Ionic + Vue
69+
Start a new Ionic JavaScript app.
8470

85-
To add Ionic Framework to an existing Vue project, install the `@ionic/vue` and `@ionic/vue-router` packages.
86-
87-
```shell
88-
npm install @ionic/vue @ionic/vue-router
89-
```
71+
<DocsCards>
9072

91-
After that, you will need to install the `IonicVue` plugin in your Vue app.
73+
<DocsCard header="New JavaScript Project" href="../javascript/quickstart" iconset="/icons/logo-javascript-icon.png,/icons/guide-quickstart-icon.png">
74+
<p>Create a new Ionic JavaScript app using Vite.</p>
75+
</DocsCard>
9276

93-
**main.js**
77+
</DocsCards>
9478

95-
```javascript
96-
import { IonicVue } from '@ionic/vue';
97-
98-
import App from './App.vue';
99-
import router from './router';
100-
101-
const app = createApp(App).use(IonicVue).use(router);
102-
103-
router.isReady().then(() => {
104-
app.mount('#app');
105-
});
106-
```
107-
108-
Be sure to mount your app once `router.isReady()` has resolved.
109-
110-
### Routing
111-
112-
When setting up routing in your Vue app, you will need to import your dependencies from `@ionic/vue-router` instead of `vue-router`.
113-
114-
**router/index.js**
115-
116-
```javascript
117-
import { createRouter, createWebHistory } from '@ionic/vue-router';
118-
119-
const routes = [
120-
// routes go here
121-
];
122-
123-
const router = createRouter({
124-
history: createWebHistory(process.env.BASE_URL),
125-
routes,
126-
});
127-
128-
export default router;
129-
```
130-
131-
### CSS
132-
133-
To include the necessary CSS in a Vue project, add the following to your `main.js` file.
79+
## Ionic Framework CDN
13480

135-
```javascript
136-
/* Core CSS required for Ionic components to work properly */
137-
import '@ionic/vue/css/core.css';
81+
Ionic Framework can be included from a CDN for quick testing in a [StackBlitz](https://stackblitz.com/), [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor!
13882

139-
/* Basic CSS for apps built with Ionic */
140-
import '@ionic/vue/css/normalize.css';
141-
import '@ionic/vue/css/structure.css';
142-
import '@ionic/vue/css/typography.css';
83+
It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `<head>` element in an HTML file, or where external assets are included in the online code editor:
14384

144-
/* Optional CSS utils that can be commented out */
145-
import '@ionic/vue/css/padding.css';
146-
import '@ionic/vue/css/float-elements.css';
147-
import '@ionic/vue/css/text-alignment.css';
148-
import '@ionic/vue/css/text-transformation.css';
149-
import '@ionic/vue/css/flex-utils.css';
150-
import '@ionic/vue/css/display.css';
85+
```html
86+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
87+
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
88+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
15189
```
15290

153-
From here, you can learn about how to develop with Ionic Framework in our [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart).
91+
With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets).
15492

15593
## Ionicons CDN
15694

@@ -161,6 +99,4 @@ Ionicons is packaged by default with the Ionic Framework, so no installation is
16199
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
162100
```
163101

164-
:::note
165-
See [Ionicons usage](https://ionic.io/ionicons/usage) for more information on using Ionicons.
166-
:::
102+
For more information on using Ionicons, visit the [Ionicons documentation](https://ionic.io/ionicons/usage).

0 commit comments

Comments
 (0)