Introduction: Combining Nuxt 3 and Ionic Capacitor
Hello and welcome back to the channel. Um, I haven't done a video in a while. I've been busy, got a lot of stuff going on in life right now. Someone's getting ready to go off to college, clearly innovative work has picked up.
But um, I always like to put something new on the channel every now and then. So for today, and actually let me move myself up to the middle since I'm kind of trying looking funny. So for today, what we're gonna do is I have... so I've been looking at all these templates that Ionic has been putting out about different uh platforms that you can use with Capacitor. And so, um I'm seeing I haven't done a Vue video for a while, so I'm gonna take Nuxt 3 and I am going to first just get it installed, and I'm going to connect it to Capacitor and show a app running in Capacitor with Nuxt. Then I'll kind of go on, I'll add Prisma to it, I'll create an API and do a bunch of other stuff.
I'm not certain how much of this will be on YouTube versus how much will get added to a course that I'm going to put out on what's it called, what's it called, on Gumroad. Um, but you know, leave me some thoughts on what you think is the best approach. Gumroad, YouTube, Udemy, free mailing list, course, whatever you think is best. But uh, that's what this is about. I'm trying to do more than just pure Ionic stuff. To me Ionic's just a framework to use for my mobile solutions and other things but I like to play in the overall JavaScript space and so, um, I think that Nuxt is something interesting and I definitely think this Vue is interesting. So let's get started here.
Scaffolding the Nuxt 3 Starter App
I'm just going to follow along with the guide here. So where's my quick start? I was just there. Let's see, can I just cheat and go back? Yeah, here we are.
Um, let me make this a little bit bigger so you guys can see. I'm really just going to follow along here what they say. So let's make a new directory. That's how you do it. Myself over properly here. mkdir video and then cd video... vdo. And then now we're in here and then we're going to just, I'm an npm guy, so we're just going to keep it simple and stick with npm. And we're just going to copy these because I don't really like to type. And let's just paste this in and give it a whirl.
Yes. Well, I can get myself out of the way for a while now. Oh, that was fast. Okay. cd nuxt-app. npm install. Um, and then npm run dev.
And let's open up our localhost. localhost:3000. Interesting, 3001. I must have something else running right now. Okay, so here we have our basic Nuxt app open.
Disabling SSR and Initial Capacitor Integration
And let's open this guy up in Visual Studio Code to see what we get. And so here we are, we are in our app. Nuxt welcome, and right now there's not really a lot going on here, but there's a bunch of other interesting stuff that you can do.
And so the... well let's just go. So first of all let's go into my nuxt.config and let's add in here ssr: false. We do not want to do server-side rendering. Okay.
All right. And then the next thing we're going to do is we're going to use our little icon tool, our Ionic tool, and add Capacitor integration. So this is what's going to allow me to get this website, that little website that I have here running as a mobile application. So it's created an Ionic project. It's added everything to it. That Capacitor has done.
Let's go back in. So we have our config set. Looks like we're going to get a capacitor.config. All right. Let's name this com.aks.app. NuxtAppIonic. So we're going to set the NuxtAppIonic. And, uh, what else are we going to do? I think I saw the name off somewhere. Let's change it here. And okay. So that is all set.
Configuring the Build Output for Capacitor
First now let's see if... All right so the next thing we want to do is let's go back to our tool, since we want to, we actually want to build this thing. All right, I think I'm going to need to modify my scripts to make sure I get... so the way Capacitor works if you, we go back to our capacitor configuration here, you can see that it's going to look for my output in a specific build directory. So we're going to have to modify the build directory here to where Nuxt is going to generate the files when we do a build here.
Okay, so, um what you can see here, if I switch back to terminal and I... so our app is already running in terminal, right, in my terminal. Terminal, terminal. So it's already running here. So was that running? Let me get this going again. All right, so our server is running. But if I do a... so let's go to back to our package.json. To actually do a build we have to do an npm run build. Okay, and if you can see, it's pushing our content out here to .output, and what we don't want our server, we want our public stuff. Clearly, we want the public files for our mobile application.
So what we need to do is we need to go into a Capacitor config and change this to .output/public. All right. And then we need to do one last thing. Since you want Capacitor to build all this stuff, we can go into our package.json and add... so they have the npm run, actually npm run build is already there. So yeah, I think we're good now to try to put this thing on a device.
Building for iOS and Troubleshooting package.json
So now, since I did do a build already, let's go back to my Ionic tools. Let's add iOS to the project. Let's add iOS to the project. Here we go. So iOS is added to the project. So you can see now it says I can run on iOS. So let's give it a run on iOS and see what we get. And I think my favorite simulator is this 13 Pro. Let's select that.
Alright, let's see. 'package.json file seems malformed.' What did I do wrong?
Let me just add some other basic stuff that's in my test project and see if that makes a difference. So let me get my app name... So it seems like Ionic wanted some extra things in there. So let's... let's try... Now we need to put back in our Ionic build statements that we need.
I'd like to kind of step through all this so that you guys can see the errors that if you run into them yourself, you can figure out how to work your way through them. So that's why I'm leaving all this stuff in here. Um, so yeah it seems like... it seems like Ionic needed all this stuff at the top: the name, the version and all that information. And now that I've added it, it looks like it built the front end and built the back end correctly. So now let's go back to our Ionic tool. And we have everything in there. Let's see if we can get our plugin working properly. So let's try and run it through the simulator again.
And it looks like we're getting better results now. So yeah, I think that's what it was, it was just missing that stuff at the top. I'll log a bug with those guys also about that. So right now let me kind of pull this up. It's kind of bizarre this window sits in the way and I don't really know how to move it. But it's compiling everything. It looks like it's firing up Xcode right now and hopefully soon we should see a little browser, not a browser, but a um emulator window show up. And hopefully we'll see our app running inside the emulator.
Adding Pages and File-Based Routing
And here we go. And so we now are running inside the emulator. And people are like, "God, it's just a website, it isn't really anything, it's just static." So the first part was to show it running and now let's actually put some pages in there and kind of navigate a little bit and see what we get.
So let's close this down. Let's go back to our actual application. The first thing I'm going to do is I'm going to go inside my... so the first thing I'm going to do is I'm going to add a pages directory here. And that's where all the pages are because I don't want to use a router, so just create a pages directory. And we're just going to take this template here and we are going to go in and we're going to create home.vue. We'll put that in here. h1... Welcome... Welcome Home. And then... about... Welcome to the About page. And so I, oh I can't do that. Um, let me rename this.
All right so now we are at our index, which is basically our home page, and then let's kind of just put a Nuxt link in here to kind of get us to another page. I believe it is... NuxtLink to... Get this extra guy out there. And then let's go to our about page... Alright so we can move back and forth. I just made some changes. And then now let's put this back on my device. And so we got our about page, we have our home page.
Building and Running the App on Android
So, this is kind of where I'm going to wrap this first part of the video up. I just wanted to kind of walk you through getting it... well actually let me do one more thing. Um, let me get see if I can get this running on Android also. So let's go, where's my Android at? Android project. Let me run an emulator. Okay so there's my emulator, sorry, sorry about that, there's my emulator running with my app inside of it. Just so that everyone's certain that I didn't fake this, let's try, um, let's run it again. Actually, let's make a change... an iOS and... okay. Save that change. Run it again on device.
And there we have it.
Recap, Key Takeaways, and Next Steps
This I'm going to wrap it here. Um, we hit we had a couple of bumps that we hit and um I will leave them in the comments below. The main bump that we hit was that apparently, um Ionic doesn't like it if you don't have the name, version information, basically if you don't have, I bet it was looking really for the name and the version at the top of your package.json. Without that it didn't work appropriately.
When we installed, when we installed Capacitor it added this ionic:build because that's needed to build the application. But this should be enough to kind of get you started with an application running from Nuxt 3, running on your device using Capacitor.
I think the next video I will do is I'll just um add a little um API to kind of show where I'm heading with this where I'm trying, where I'm trying to go with this is to show you how you can use Nuxt to build your mobile application but also to create the server API that your application integrates with. So we'll add some server API routes to this and we'll show how you can kind of query them from your Capacitor application. Hopefully you found this enjoyable. Please make sure you like, subscribe, and leave your comments below if you'd like to see more stuff content like this. Thanks and bye now.
