Create an Ionic App with Vue + Vite - Part I

Ionic is an amazing cross-platform mobile framework that allows you to create mobile apps with your web technology of choice. And yes, they have a Vue Plugin.

So in today's tutorial, we will:
- Create a vue app with Ionic CLI
- Change the serve and build system from vue-cli to ViteJS, and troubleshoot
- Learn how the theming is handled by Ionic using CSS Variables, also how can we preview the different styles between iOS and Android

If you have any questions please share them in the comments, and don't forget to subscribe for more content like this.

----

Our Sponsors

Meet Storyblok (not Storybook which is a different thing) The world's first headless CMS that works for both developers & business users.

I must warn you when you start using it, you will never go back to any other CMS solution

00:00 - Intro
00:17 - Previous experience with ionic
00:43 - Ionic + Vite
00:55 - Storyblok Spot
01:28 - Installing Ionic CLI
01:57 - Initializing ionic app with Tabs template
02:30 - Marker 7
05:05 - ionic vue app structure
08:12 - ionic vscode extension
10:11 - vscode extension preview emulated device
11:06 - Instalaling Vite and troubleshooting
17:45 - Ionic theming
25:21 - Ionic UI Components
31:07 - Outro

[mateobistuer]

I have a problem the alias @ don´t work for me and i had make routes without alias, anyone same problem? thanks for the video

[kissu_io]

Great video, thanks for the quick overview + the l33t h4cks! 🤘🏻 😎

[martinmitry]

This doesn't seem to work with Vite 4

[tunji_xy]

Nice content, could please you do a video showing how to use tailwindcss with vue ionic.

Thanks..

[rolandtarling]

It didn't work for me, but I fixed these 3 issues:

1/ Couldn't read process in this call:

2/ The @ alias didn't work.

Fixed both by updating the original vite.config.ts to this:

import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";

export default defineConfig({
plugins: [vue()],
define: { "process.env": {} },
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
}
});

3/ The suggested script kept giving me this message:

"[INFO] Waiting for connectivity with npm..."

I fixed it by adding this to the package.json:

"dev": "vite --open"

To run the server I just type the following into the terminal:

npm run dev

Hope this helps 🙂

[maxwellmuhanda]

When you said three weeks later i thought you were joking😂