` with Ionic's routing and layout components. The router outlet is where your pages will be displayed.
+
+## View Routes
+
+Routes are defined in the `index.html` using `ion-route` components inside the `ion-router`:
+
+```html
+
+
+
+
+```
+
+When you visit the root URL (`/`), the `home-page` component will be loaded. When you visit the `/new` URL, the `new-page` component will be loaded. We will define these components next.
+
+## Add the Home Page
+
+Create a new directory called `pages` inside the `src` folder, then add a file called `HomePage.js` in that directory with the following content:
+
+```js
+class HomePage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Blank
+
+
+
+
+
Ready to create an app?
+
+ Start with Ionic
+ UI Components
+
+
+ `;
+ }
+}
+
+customElements.define('home-page', HomePage);
+```
+
+This creates a custom element called `home-page` that contains the layout for your Home page. The page uses Ionic's layout components to create a header with a toolbar and scrollable content area.
+
+:::tip Learn More
+For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation.
+:::
+
+Next, add a `
+
+
+```
+
+At this point your browser should be displaying the Home page.
+
+
+
+## Add an Ionic Component
+
+You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) to navigate to another page. Update the `HomePage` component in `src/pages/HomePage.js`:
+
+```js
+class HomePage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Blank
+
+
+
+
+
Ready to create an app?
+
+ Start with Ionic
+ UI Components
+
+
+ `;
+ }
+}
+
+customElements.define('home-page', HomePage);
+```
+
+## Add a New Page
+
+Add a new file named `NewPage.js` to `src/pages` with the following content:
+
+```js
+class NewPage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+
+
+
+ New
+
+
+
+ Welcome to the new page!
+
+ `;
+ }
+}
+
+customElements.define('new-page', NewPage);
+```
+
+This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history.
+
+Next, update the `
+```
+
+## Navigate to the New Page
+
+To navigate to the new page, update the button in `src/pages/HomePage.js` to be inside of an `ion-router-link`:
+
+```html
+
+ Navigate
+
+```
+
+When the button is clicked, Ionic's router will automatically navigate to the `/new` route and display the `new-page` component.
+
+:::info
+Navigating can also be performed programmatically using `document.querySelector('ion-router').push('/new')`. See the [Ionic Router documentation](/docs/api/router) for more information.
+:::
+
+## Add Icons to the New Page
+
+Ionic JavaScript comes with [Ionicons](https://ionic.io/ionicons/) support. To use icons, you need to import them, register them with `addIcons`, and then use them with the `ion-icon` component.
+
+Add the necessary imports and register the icons in `src/main.js`:
+
+```js
+// ...Ionic initialization
+
+// Icon imports
+import { addIcons } from 'ionicons';
+import { heart, logoIonic } from 'ionicons/icons';
+
+addIcons({ heart, logoIonic });
+
+// ...CSS imports
+```
+
+Next, update `src/pages/NewPage.js` to include the icons:
+
+```js
+class NewPage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+
+
+
+ New
+
+
+
+ Welcome to the new page!
+
+
+
+
+ `;
+ }
+}
+
+customElements.define('new-page', NewPage);
+```
+
+For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/).
+
+## Call Component Methods
+
+Let's add a button that can scroll the content area to the bottom. Update `src/pages/NewPage.js` to include scrollable content and a scroll button:
+
+```js
+class NewPage extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+
+
+
+ New
+
+
+
+ Welcome to the new page!
+
+
+
+
+ Scroll to Bottom
+
+
+
+
+ `;
+
+ // Generate items and add scroll functionality after the element is connected
+ this.setupScrolling();
+ }
+
+ setupScrolling() {
+ // Wait for ion-content to be ready
+ customElements.whenDefined('ion-content').then(() => {
+ // Generate items
+ const itemList = this.querySelector('#item-list');
+ for (let i = 1; i <= 50; i++) {
+ const item = document.createElement('ion-item');
+ const label = document.createElement('ion-label');
+ label.textContent = `Item ${i}`;
+ item.appendChild(label);
+ itemList.appendChild(item);
+ }
+
+ // Add scroll functionality
+ const scrollBtn = this.querySelector('#scroll-btn');
+ const content = this.querySelector('ion-content');
+
+ if (scrollBtn && content) {
+ scrollBtn.addEventListener('click', () => {
+ content.scrollToBottom(300);
+ });
+ }
+ });
+ }
+}
+
+customElements.define('new-page', NewPage);
+```
+
+To call methods on Ionic components:
+
+1. Get a reference to the component element using `querySelector`
+2. Call the method directly on the element
+
+You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation.
+
+## Run on a Device
+
+Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com):
+
+```shell
+npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
+npx cap init
+
+npm run build
+
+npx cap add ios
+npx cap add android
+```
+
+Open the native projects in their IDEs:
+
+```shell
+npx cap open ios
+npx cap open android
+```
+
+See [Capacitor's Getting Started guide](https://capacitorjs.com/docs/getting-started/with-ionic) for more.
+
+## Framework Integrations
+
+Ionic Core also works with other frameworks and libraries that support custom elements, such as [Alpine.js](https://alpinejs.dev/), [Lit](https://lit.dev/), and [Svelte](https://svelte.dev/). However, when using Ionic Core with these libraries, you won't have the built-in form and routing capabilities that are tightly coupled with Ionic's official Angular, React, and Vue framework integrations, and will need to use their respective routing and form solutions instead.
+
+## Explore More
+
+This guide covered the basics of creating an Ionic JavaScript app with Vite, adding navigation, and introducing Capacitor for native builds. To dive deeper, check out:
+
+
+
+
+ Learn advanced Vite configuration and optimization techniques for Ionic JavaScript apps.
+
+
+
+ Learn more about JavaScript's core concepts, tools, and best practices from MDN Web Docs.
+
+
+
+ Discover how to handle routing and navigation in Ionic JavaScript apps using the Ionic Router.
+
+
+
+ Explore Ionic's rich library of UI components for building beautiful apps.
+
+
+
+ Learn how to customize the look and feel of your app with Ionic's powerful theming system.
+
+
+
+ Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.
+
+
+
diff --git a/sidebars.js b/sidebars.js
index d55c287685..a04b7796f1 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -96,6 +96,12 @@ module.exports = {
'angular/pwa',
],
},
+ {
+ type: 'category',
+ label: 'JavaScript',
+ collapsed: false,
+ items: ['javascript/overview', 'javascript/quickstart'],
+ },
{
type: 'category',
label: 'React',
diff --git a/static/icons/logo-javascript-icon.png b/static/icons/logo-javascript-icon.png
new file mode 100644
index 0000000000..33b21ade36
Binary files /dev/null and b/static/icons/logo-javascript-icon.png differ
diff --git a/static/icons/logo-vite-icon.png b/static/icons/logo-vite-icon.png
new file mode 100644
index 0000000000..0df3286b6c
Binary files /dev/null and b/static/icons/logo-vite-icon.png differ
diff --git a/static/img/guides/quickstart/unstyled-home-page.png b/static/img/guides/quickstart/unstyled-home-page.png
new file mode 100644
index 0000000000..462a44ba86
Binary files /dev/null and b/static/img/guides/quickstart/unstyled-home-page.png differ
diff --git a/vercel.json b/vercel.json
index 4a9439218c..5ab15d8df2 100644
--- a/vercel.json
+++ b/vercel.json
@@ -33,6 +33,10 @@
"source": "/docs/angular/your-first-app/7-live-reload",
"destination": "/docs/angular/your-first-app/live-reload"
},
+ {
+ "source": "/docs/javascript",
+ "destination": "/docs/javascript/overview"
+ },
{
"source": "/docs/ja/",
"destination": "/docs/ja"