---
title: "Kickstart: Getting started with Contentstack Edge and Nuxt"
description: "This guide walks you through setting up and running a NuxtJS project integrated with Contentstack Edge, ideal for developers new to either technology. Visit our docs for an in-depth write up: https://www.contentstack.com/docs/developers/kickstarts/nuxt"
date: "2025-05-30T08:55:30.000Z"
url: "https://timbenniks.dev/videos/contentstack/016-gninm9si1ly"
youtube_url: "https://www.youtube.com/watch?v=gNINM9Si1lY"
playlist: "contentstack"
duration: "10:09"
image: "https://img.youtube.com/vi/gNINM9Si1lY/maxresdefault.jpg"
tags: ["composable-architecture", "cms", "api-design", "performance", "frontend"]
---

# Kickstart: Getting started with Contentstack Edge and Nuxt

This guide walks you through setting up and running a NuxtJS project integrated with Contentstack Edge, ideal for developers new to either technology. Visit our docs for an in-depth write up: https://www.contentstack.com/docs/developers/kickstarts/nuxt

Watch on YouTube: https://www.youtube.com/watch?v=gNINM9Si1lY

## Transcript

This is Tim from Condensac and this is a code overview of our kickstart with [Music] Nox.js. And so a kickstart is by far the simplest way to connect your front end to the content stack platform. And you get a bunch of really nice goodies out of the box, which means you get visual builder, you get live preview, you get stuff like moderator blocks, you get like an entry. So it's a real nice base to have everything covered for you to actually start your project without us giving too much opinion on how to build that front end. It's a very small amount of code in the context of KNX. So it works with how NX wants to work and the rest is up to you. So when you look in the browser here, you can see this is our content kickstart with NXT and you get like an image, you have some rich text, you have some modular blocks. If you actually want to know what a modular block is, you can actually go to the docs right from your kickstart and it loads here. It explains exactly what it is, why you would want to use it, things like that. And it also has links to our academy. So if you want much more indepth learning or certification, you can go there. and also a link to our community so you can join our community, talk about what you're building, any question you might have. We're here to help you. And so this um let's let's have a look before we go into the code. Let's go into the CMS to show you how this looks there. So you get this entry. There's just one. Let's keep it simple, right? And you see there's the images and all that stuff, the rich text and then the modular blocks. And we have given you out of the box in that code a live preview. So when you want to you know add some stuff you can see that coming up here. But there's also well let's not save this. Um you also have our visual builder which is basically the same tech as the live preview but then really visual. So you can actually click on this and start editing right in place. You can also open the form on the side if you want to just edit stuff like this here. if you felt like, hey, this is slightly more my game. So, you can like in place change images kind of whatever you want to do. And so, this is really nice with that very small code base that we'll look at in a second. You have everything you need to show off your work to content edit everything you want and you know, be happy as a developer hopefully. So, let's have a look at what the code actually looks like. So this is a out ofthebox next and it's actually ready for version 4 when that comes out soon. And so we've decided to use Tailwind. Of course you can just rip this out if you want. Um but so many people use it now we thought let's give you a super simple project with Tailwind. And so if you want to connect to content stack in the next world you can do that either with a plug-in or with a module. And so for this we've opted to the less opinionated approach and we made you a plugin. And so you can have a look at that plugin that is autoloaded by next. And so in here um we have a bunch of variables that actually come from the next convict that are coming out of your environment variables, right? So your API key, the region like EU or maybe North America because content stack can live on a bunch of different places from Azure to Google cloud to AWS. And so we have this extra little package that helps with setting up the right URLs which is actually this content stack endpoints package. And so you can just give it a region like EU and it will come back with a whole list of all the URLs you need for APIs and all that stuff. And so that actually gets you that combined with these variables, you can start up all the things you need. And so this plug-in gives you your stack. So you can connect to content stack stack which needs an API key, delivery token. And if you have live preview enabled, you add a bunch of extra stuff there as well. You see that endpoint property here? That actually is a URL that came from that little package that I built. And this now allows you to query anything you want. um set it in live preview, yes or no, because our live preview has a different draft endpoint specifically for the user editing. So you don't have to save, but you can still see that content. And so if you want to know how this whole live preview thing works like under the hood, there's another video in this series. So there's a link in the description for you so you can watch that. So other than creating the stack, we also create our live preview initialization. And it's only happening if we're in the client side. This is not a server side thing. So in the client, we have a connection to the contents like CMS. There's a handshake over the iframe and information can be passed back and forth. And so there's different ways to pass this information with SSR or without. Again, watch that video to learn why and how. So this initializes inside the client, sets you up to be able to query different endpoints automatically with our stack because of this. And so what it returns is the stack itself, the fact if live preview is turned on yes or no in your environment variable, you can actually set that and then this live preview um instance that we can then use because there's a bunch of functions on it. And so of course when you want to actually query a page, we made a composible. So there's the use get page composible. And right now this is basically just for a URL. So I want to get the page at slash. If you look at our entry here, you can see the URL for this one is slash. And so basically what I've created here is a use async data with some caching that wraps our stack. So the stack we received from the next app, right? Because it's entered into the context through this plug-in. And from there you get is live preview turned on because it's also put into the context and the stack. And so we will just say well give me the content type page because that is actually the content model that we created in the CMS find it query it and then where the URL is actually slash and then give it back to me. And so there's this one extra thing if you wanted to do live visual building to actually click on a title and edit it in place. For that, we add a bunch of meta data to your entry JSON that comes back from the SDK. Again, if you really want to go dive deep and learn how that works, there's this other video in the description. And so this annotates your JSON so you can add that to your HTML. I'll show you that in a sec. And that's it. So we ex So we have this plugin to set stuff up for you and then we have the composible to get data. Well, let's go to our app and see how that actually works. And by the way, all of this is fully annotated. So when you just go here and you don't know what a certain thing does, it's all here for you. So essentially the way we do it is we get the page and then use async data. This awesome function has a refresh property. So what we do on the client, so when everything is mounted, we grab this live preview system, this SDK that we actually return here in our plug-in, right? This one. And so what happens is if live preview is turned on and there's an on entry change function that fires, then hit that refresh. So what that looks like is the following. So when we are having the live preview turn on and I start changing this now when I stop typing that function is fired over the iframe and it refresh it refetches the data and then it can show it on the page here. That's exactly what's happening here. I stop typing this is fired it refreshes that get page and it gets the latest draft state of whatever this is right and well let's let's clean that up and then there you go. And so that works with images, rich text, all the things. And so now that we have the page that comes out of this function either in live preview or without um you can start just rendering your page. Page.title, page.escription. But now that you see this, there's this special binding here. You see that dollar? That dollar is actually to tell the system what item you just clicked on in the visual builder. And this is that dollar that comes out of oops out of this. If we add the editable tags, there will be a dollar JSON added to your return. So let's have a look at this baller, right? Let's look at the description here. So we have this page dot metadata description. So when we actually have a look at this description here, you can see that this paragraph has a data tag. Now oops. So data content stack live preview. So for a page content type with the UID this one, the language enus and the description field. So now when I click on this, our editor knows, oh, it's that thing you're editing. So when I even open the form here and I click on this, it actually focuses on that because it knows exactly which field on which entry on which type you're editing. And that's what this helps with. If you don't add it, you can still have the form and everything still works. But this is just a nice addition to the whole experience. And so that's about it. So we have the app view that just, you know, renders the HTML based on the JSON. We have our plug-in that sets our basics. And we have the composible to get our page back. And so from this, you should be able to do a lot of super fun stuff. and feel free to join our community and just ask more about how this would work, how does the TypeScript work, do we have a CLI, all that stuff. Talk to us and also you can go to the academy to see a bunch more videos about all this. So, um, see you soon and happy coding. Cheers.