Awesome, all right. I’m Cecelia Martinez. I’m here today to talk about how you can build and deploy mobile apps with Vue Native. Just kidding. No, we’re gonna talk about Nuxt Ionic. The QR code and the link on the screen are for these slides, so you can feel free to grab them. I will also share this again at the end of the presentation, so if you wanna wait and grab 'em then, feel free. A little about me, I am a developer advocate for Appflow, the mobile CI/CD platform built by Ionic. You can connect with me, @ceceliacreates on Twitter and GitHub. You can also feel free to connect with me on LinkedIn. It’s just linkedin.com/in/ceceliamartinez. Before I joined Ionic, I was at companies like Cyprus and Replay, and have been very fortunate to work on open source developer tools and help developers solve problems. So super excited to be here at VueConf again this year, talking to you about how we can solve the problem of building mobile applications.

So before we get into it, just a read of the room, who here has built a mobile app? Okay, quite a few of you. Awesome, okay. And how many of you would like to build mobile apps, but haven’t done so yet because you haven’t learned a native framework? Couple more folks there? Okay, great. So I’m here today to talk to you about how you can take your existing skills with Nuxt specifically, but also with Vue, but web development in general, and leverage those to build mobile applications. And this is possible today because of a specific tool I’d like to dig into called the Nuxt Ionic Module. So the Nuxt Ionic Module is a module built for Nuxt. So how many Nuxt users do we have here? Couple, okay. So I’m a big fan of Nuxt. I’ve used it for most of the projects that I do, that I get a choice in my stack. So one of the great things about Nuxt is it has this really robust module ecosystem, where you can use modules, add them to your Nuxt application, and it introduces new functionality and capabilities. So there’s an Ionic Module, and this was built by the Nuxt team. So thank you to Daniel Roe who’s here, hopefully somewhere, and the Nuxt contributors for building this out. What this does is it allows you to integrate Ionic and Capacitor into your Nuxt application to be able to build for native Android and iOS. So some of the reasons why you might wanna use the Nuxt Ionic Module. So it allows you to leverage your existing knowledge and use cases for Nuxt, but deploy them to mobile. So you can either convert an existing Nuxt app to mobile, or you can build one from scratch.

Again, you add it as a Nuxt module, and it works outta the box. See, there’s little to no configuration needed for most use cases. And it gives you both native look and feel components, as well as native plugins that allow you to have functionality that interacts with a native device. It also is what lets you build to native Android and iOS bundles. The Nuxt module is a work in progress, it’s open source. You can definitely check out the GitHub repository and see all the documentation there. So the reason that Nuxt, the Nuxt Ionic Module works so well is because what it really does is introducing the power of Ionic Framework and Capacitor into your Nuxt app. Who here has used Ionic Framework? Couple of hands, okay. So Ionic framework is a component library that provides you with components that have native look and feel with adaptive styling. What that means is the component knows, “Hey, I’m on an Android device, I should look like this. I’m on an iOS device, I should look like that.” So that your user has a native-like experience that they come to expect from interacting with their mobile device. It also includes the prebuilt gestures and animations that you expect from a native application, so that you’re able to leverage those within your app without having to learn a native development framework. In conjunction with that, there is Capacitor. So who here has used Capacitor? If you’ve used Ionic, you’ve also used Capacitor, just so you know. So Capacitor is the native runtime. Capacitor is what actually is the branch that connects your, essentially what is a web app built on top of web components, and connects that to your native device. That’s what gives you the native functionality plugins. So if you need to interact with anything on the native device, like file picker, your camera, your location, Capacitor provides the functionality for that, as well as the runtime which builds to those native binaries.

So the Nuxt Ionic Module is not only bringing in the Ionic Components, but also Capacitor. And that’s what allows you to take that web app and turn it into a native application. And so I mentioned the Capacitor, these native plugins that are available. We recently did introduce a plugin registry, this week, it was launched. This actually collects all 1,100 plugins that we have for Capacitor. A lot of them are from the community. We also have officially supported plugins built and maintained by Ionic. This is an API first approach, the registry, it’s open source. The first implementation of it is actually built into the Ionic VS Code extension. So you can view which plugins have been installed in your application, as well as filter and find new ones. So there’s a link in the slides if you’d like to learn more about that, and I can also show you that here when we dig into VS Code. All right, so there some additional features for the Nuxt Ionic Module besides just bringing in Ionic and Capacitor. And a lot of these features I love, because it really plays on the best of both worlds from Nuxt and Ionic, and the first one is auto-importing. So one of the things I love about Nuxt is I don’t have to worry about importing the components, dealing with any of that. And so this works the same way with all of the Ionic components. So it automatically imports the components, as well as our Ionicons, our Ionic icon library into your application, so you can leverage them throughout any of your single file components without having to manage those manually. It also has auto-import for any composables, so that you can leverage those as well, and there are specific Ionic composables with utility functions that you can use in your project.

These are some examples of some of the Ionic components. And again, they have adaptive styling, so they’ll look different ways on Android and iOS devices. The other thing I love about Nuxt is page routing. And so you get that as well by using the Nuxt Ionic Module. So you get out-of-the-box page routing. So Ionic also has page routing that allows you to automatically do that, but what we use is a method called useIonRouter that you can access if you need to have additional functionality. But then you also still get support for your Nuxt routing utilities like definePageMeta. So again, kind of combining the best of both worlds. There’s also theming available. So all of these Ionic components have exposed CSS variables that allow you to control things like the color, really, a lot of different functionality. These can be easily updated using the Nuxt CSS property. So you can set your CSS property to be able to access and override these Ionic exposed variables to allow for things like custom theming, dark mode, anything that you’d wanna customize in your application. And finally, I mentioned that there’s those built-in utility functions, things like swiping gestures, animations, if you need to be able to use the back button or access the keyboard of the device. Those are also built in as some nice composables that you can leverage in your project. All right, so we’re gonna walk through how you can get started with the Nuxt Ionic Module.

The first step is, of course, you need to add the Ionic module to your Nuxt project. We also need to set up the configuration for it, it’s very simple. We’ll also set up routing. We’ll talk about how you can use some of those automatically imported components and icons in your project. And we’ll take a look at how to update your theme. So all the things that we’re gonna be working with in this first section are gonna be specific to the Ionic framework. All right, so let’s dig in. So here, I have a, just kind of like I’m on… Just my blank starter, yep, branch. And this is a basic starter Nuxt application. So just to show y’all here. Go ahead and refresh. So I have my mobile view set up, 'cause that’s what we’re gonna be kind of working with, but this is just your default Nuxt starter. Probably y’all have seen this before. We’ll go ahead and change this to no emulation. All right, so the first thing that we wanna do is we’re gonna want to set up this module. We’ll just quickly find where I’m at. Okay, so we just use that, we’re using a command, this npm install, Nuxt, Ionic. I’m gonna do a lot of copying and pasting, just to save myself some typos. So I’ll stop my server. We’re gonna install the module, and we’re also gonna add this to our Nuxt config.

So this just kind of lets our Nuxt project know that we’ve installed this module and to leverage that throughout our application. Thank you to for the quick installations, and all of this today. And so we’ve added that to our Nuxt module. So now if I restart my server, I have a Nuxt Ionic app. And it’s going to look very similar, because we haven’t changed anything yet, but that is how you initially add it to your project. The next thing that we’re gonna need to do is set up our page routing. So one of the things that I wanted to showcase here in the console is this message that we see here. It says, “Disabling Ionic Router integration as pages directory does not exist.” So our Nuxt config with the module is looking for a pages directory in order to leverage our Ionic router, it’s not finding it. So we wanna go ahead and get that set up. I also wanna showcase that we’ve added an Ionic config automatically as part of that installation process. So our app.vue, we have this kind of just Nuxt welcome template here. What we’re gonna do next is we’re going to go ahead and set up, let’s see, our routing app. So I’m gonna copy and paste this template into my app.vue. And if I need to make this bigger, can y’all read that, or should I make it a little bit bigger? Bigger, all right. Okay, cool.

So what we have here is we have our template, we have our ion-app component, and we have our ion-router-outlet component. And again, these have been automatically imported. We didn’t, thanks to the module. That is going to establish our route. And we can see here, we’re getting some warnings, because we haven’t set up our pages directory. So what we’re gonna do now is create that pages directory and create a nice index.vue. We’ll go ahead and just do a template here, maybe just like an h1, final little hello world, and save that. And so now our index.vue page is gonna automatically be pulled in, maybe. Let me go ahead and restart my server. Save my app.vue, ion-router-outlet, pages. Okay, that looks better, there we go. Okay, so now this is loading. And now we have our hello world. So now we have an Ionic app, but we don’t have any of our nice looking components. Like if somebody installed this app, they’d be like, “What is this,” right? So we’re gonna wanna go ahead and start leveraging all these really nice, automatically-imported components and icons. I’m not gonna make you watch me type CSS, so let me go ahead and just clean this branch really quick. And I’ll check out another one that has some information already here.

All right, so, couple of things we can look at here in this branch. So in this branch, we have a pages directory with two pages. We have an index.vue and a resources.vue. Again, these routes are gonna be automatically created so that we can, and then that’s handled by Nuxt and Ionic module. So in our index.vue, we now have a nice kind of component tree here using our ion-page as our root. Then an ion-header and an ion-content component. These give us some really nice formatting that’s built in so that it looks like a native application. Here, we also have just a Nuxt Ionic module h1, and a button to get started that uses the router-link prop in order to link to our resources page. On our resources page, we have the same structure. We have our ion-page, we have our ion-header, and our ion-content. And here we’re leveraging ion-list with some items and some icons. So I’m gonna go ahead and start this up and we can see what this looks like. We’ll start the application.

All right, so now we have a, these are leveraging all of our Ionic components. So we have the Nuxt Ionic Module, we have our ion-lists with our ion-items, we have these nice icons that have appeared here, and their links, and we’re able to have routing back and forth. Also note that the URL has that routing, so it’s /resources when we navigate to our resources page. You see that it has these icons here. Now, if you’ve ever used another kind of icon library, and you have to deal with manually importing each individual icon, and deciding which ones are going to be used, this experience kind of abstracts that away by automatically importing all of these. So here, we have our ion-icon component, and we’re pulling in the name of the icon. So if we wanted to add another one, for example, we’ll do ion-item, ion-icon, and we’re gonna go ahead and we just set the slot here to start first. And then we can do the icon binding, and we can start typing. So, oh, let’s see, did I… Oh, I didn’t type that right. There we go, so our icon binding. And once I start typing, you can see all of the icons that are available. Obviously, you can also check out the documentation and search to find your names. But we can choose any of these, and insert that into our application, and we can see what that looks like.

So we have all of these that are automatically imported, we can start using them throughout our app, and they have that nice look and feel of a native application. All right, so I’ll go ahead and get rid of that item that I just added. So we have our application, it’s got some nice components in it, it’s styled. The thing that’s missing, though, is if I were to go ahead and emulate dark mode, nothing changes. We don’t have any dark mode theming on our application. So we wanna go ahead and add some theming to this. To add theming, what we’re going to do is we’re going to create a theme/variables.css file. And again, we’re gonna update our Nuxt config again in order to use the CSS property in our Nuxt config to reference that new file that we are creating. I’m gonna go ahead and just actually stop my server here. Okay, and I’m gonna check out the theming branch that I have set up. So in this branch, we can see a couple of changes have taken place. There is now a theme directory with a variables.css file. I have also updated the Nuxt config to add that CSS property referencing that file path. That means that this will now be applied to, if we kind of hover over this, so we can see this will now be applied to every single, it’ll be applied globally to every page in our Nuxt application.

This is really useful for theming, because we don’t have to manually change anything, and it will override everything that we have. The variables.css file is overriding those exposed Ionic CSS variables. So here we have certain color properties. We have different components that we’re referencing in our code that we’re overriding. So we have our colors here that we’re defining. But then down here, we have, when there’s prefers-color-scheme dark, we’re setting specific colors for that. And we’re also having a little bit of variations for iOS dark theme and Material Design dark theme, which is for Android. So now that we’ve updated this, then we restart our server. We’ll go back to our application here. Now we have this nice, respected dark theme. And again, if I were to change that to light, it’ll toggle back and forth. So it’s really that simple to apply a theme to your application. You could use that if you have some branding colors, and the normal Ionic colors don’t match up with that. So we have our app, everything is themed. The one thing that I wanna do next, go back to my main branch, because this is a pretty basic demo app, but I feel like we need some kind of VueConf pride here. So I’m just gonna change this, and say, “Nuxt Ionic Module @ VueConf!” Maybe like a little, oops. A little party guy, maybe.

Oh, my emojis aren’t working, okay, that’s fine. There’s just supposed to be an emoji menu that popped up normally. So I’ll go ahead and save that, I’m gonna go ahead and push that change. Yep. Yep. Yep. Okay, and then we’ll go ahead and push that. Okay, so we have our application, but right now, it’s still a mobile web app. We have not actually built this to native. So the next thing that we’re gonna do is now leverage Capacitor. So as I mentioned before, Capacitor is that native runtime that makes it native. In order to enable this, we’re going to use the Ionic CLI in order to enable the extension. Then we’re going to, then we can add an Android or iOS project. Whenever you make any changes to your Nuxt app, you’re going to generate a production build of your Nuxt app, sync it with Capacitor, and then you’ll be able to open, and run it on any kind of mobile device. So the first step that we do is we’re going to integrate the Capacitor integration with Nuxt module. So it comes installed, but you do want to enable it, and then add whichever platform you’d like to build for. So in our code on this branch, I already have that configured, and a couple of things that you can tell that it’s working is we now see that we have an Android directory. This Android directory includes all of our native code.

So we can access our Java files, we can access our build.gradle. We have complete access to all of it, which is nice as compared to some of the other cross-platform frameworks where that’s abstracted away. We also have an iOS directory, which contains all of our Swift code, it contains our Info.plist. So if we wanted to make any changes to the native application, we can. If you needed to do anything specific with that. But a lot of what we can accomplish, we can do right with Ionic and Capacitor. It’s also added a Capacitor config. This is where you can update your appId and your appName. So we just made a change to our application, right? So we just changed the text, which means that we now need to do a new production build, with generate. Again, thank you, . This would probably be a lot more painful without it. And then we’re also gonna do npx cap sync. What that is doing is that it’s syncing, oh, we gotta do a quick install. This is gonna sync our new web production build that we just did to our Android and iOS files. All right, another option that you can use is the Ionic VS Code extension. So here, if you don’t like to use a CLI, you have all these options in order to be able to run. You can build for, you can run for Android and iOS, you can build. This is also where you can explore the different plugins that are available. So this is the plugins directory, and it shows what plugins that you already have installed, as well as new ones that you can add.

So if you prefer a more GUI experience, the VS Code extension will handle all that for you as well. So let’s go ahead and do that. We’re gonna go ahead and run npx cap run android, and we’re gonna select which emulator we wanna use. I just wiped the data on them, so hopefully we get a nice clean emulator experience. So it ran the Gradle build. So this is an actual app debug APK file, this is a native Android file, and it’s gonna open that up in our emulator. And it’ll take a second here. Yep, I just wiped the data, so it’s a fresh emulator experience. Starting up my virtual Pixel 6, and it’s gonna install that APK that was just generated onto this device. So it’s gonna launch, and here, we have our Nuxt Ionic Module @ VueConf, and we can interact with this on our Android emulator. Again, this is a native application itself. So fun stuff. We have an native app. We could do the same thing on an iOS simulator if we wanted to build that. Those take a little bit longer, iOS builds, so I won’t put you through that, but again, you could just run this here in iOS as well from the VS code extension. All right, so we have an app. It’s built, it’s running on an Android emulator, but you know, if we wanna actually get this to the universe, we need to be able to actually deploy it. So we can do that with a tool called Appflow. Appflow, as I mentioned, is a mobile CI/CD platform. It’s also built by Ionic. Ionic does a lot in this mobile space. But it’s specifically designed for developers. So it’s designed for web developers who are coming to mobile and don’t wanna have to deal with specific native configurations, and having to manually update things, or deal with Xcode, or deal with Android Studio configurations. So it includes cloud-native builds, as well as deployments to app stores and the ability to build automated workflows. So you can build an automated workflow that will trigger whenever you push to a specific branch.

This allows you to, essentially, once you’ve connected your project repository using GitHub, GitLab, Bitbucket, whatever Git provider you use, we’ll watch for new commits, and then trigger those automations. So what this looks like… I’m gonna make this a little bit bigger. This is what it’s supposed to look like. So here is the project that I’ve connected. So we can see here, we have my commit that I made five minutes ago to add Vue. And we could start a build from this if we wanted to manually in order to build in the cloud. So for example, if I did not have a Mac machine, but I needed to build for iOS, I could do an iOS build using Appflow’s runners. If we’re doing any kind of app store build, or like a release build that requires signing certificates, you upload those into Appflow, they’re stored, and then they can be applied at build time without having to manage those manually. You can also apply any environment variables or configurations when you deploy to app stores. So I already have some automation set up. Whenever I push to my main branch, it kicks off a web preview build as well as an Android debug build. So I can see in my build screen here that my web preview build kicked off about six minutes ago, and this was the web build, so that’s gonna be using the nuxt generate command. I can do a web preview here in Appflow where I can see what this build is going to look like in a mobile web view. And so that allows me to see it kind of similar how you would in like a dev tools environment, but if somebody else did the build and I’m wanna share it, or I wanna see it as a stakeholder or a tester, it allows me to see the application in an iPhone as well as on an Android, or iPad and tablet. And again, I can share this out with my teammates or stakeholders, and you can also scan the QR code to be able to view what it would look like in mobile web on an actual device. I also kicked off a Android debug build.

So the Android debug build, this is, again, this is, an APK is a real native binary file. So this has a QR code that allows me to, if I scan it with an Android device, it will let me install that APK on my device. So if you have, if you’re doing manual testing, or again, if you wanna share this with stakeholders, and they wanna be able to interact with it on a real native device, it’s going to install that APK file. Install anyway, open it, and then I’m, again, able to interact with my application on my real Android device. This is the change that we pushed five minutes ago. So yeah, so that allows for some really high fidelity testing, even though you’re not building with a native framework, or with native code. All right, so, a couple next steps if you are interested in getting started with Nuxt Ionic Module. There are some resources in this slide. Again, that QR code will link directly to these slides if you wanna access any of the links and resources that we covered today. I’m gonna share it again at the very, very end as well. I also wanted to make a quick note. So Alex mentioned this earlier, kind of in the keynote. So we talked about Ionic and Capacitor.

So this is specifically the Nuxt Ionic Module, it gives you access to the component library. If you wanna use your own components and styling, maybe with a Nuxt app, or maybe with a Vue app, or really any type of web app, you can just add Capacitor by itself, and that will give you the ability to build to that native Android and iOS, add in any of the native plugins and functionality, and ship a mobile application using everything that you already know how to do. So there’s a link to a blog post about how to get started with that if you’re interested. And again, Ionic, Capacitor, these tools are free and open source, and Appflow does have some free plans to get started. So thank you very much for being here today, and again, you can grab the slides. Thank you.