Nuxt Studio: The Effortless Way of Web Development
Nuxt Studio is a powerful web application built on GitHub for creating, editing, and deploying Nuxt 3 applications. Specifically designed for projects based on Nuxt Content, a Git-based CMS supported by Markdown. Nuxt Content is a Nuxt module that allows developers to integrate Markdown content into Nuxt applications. This enables developers to focus on the structure and design of the website while allowing editors to manage content using robust Markdown syntax. Additionally, by adopting a Git-based approach, you can easily manage content changes and ensure version control.
Redefining the collaboration between developers and marketing teams, Nuxt Studio enables everyone to easily create impressive web applications thanks to the convenience and flexibility offered by Nuxt Content. With its live preview feature, you can quickly visualize content changes and see how the website will look in real-time, allowing for efficient collaboration and seamless workflow between teams.
One of the most powerful features of Studio is that developers’ custom components can be used via Markdown by content editors without having to touch the code. The editor provides autocomplete functionality for these components, facilitating seamless integration and enhancing productivity for both developers and content editors.
A Quick Look at Nuxt Studio
Let’s take a quick look at how to quickly create a web application with Nuxt Studio and how to update its content seamlessly.
Nuxt Studio seamlessly integrates with the GitHub API, ensuring smooth synchronization between Studio and your GitHub repositories. To get started, you need to install the Nuxt Studio GitHub App on your personal account or the organizations you manage. Please note that you need administrative permissions in the repository to install the GitHub app.
Once the installation process is completed and the necessary permissions are granted, you can start creating a web application with Nuxt Studio. When you want to add a new project, you’ll be presented with three different options. Let’s now take a look at these three options together.
Start from a theme
With this option, you can choose a ready-made and fully customizable theme. Currently, only themes created by the Nuxt Studio team are listed, but soon we will also list and allow the use of themes created by the community. Click here to view the available themes.
After selecting a theme, Studio will prompt you to create a new GitHub repository or choose an existing one.
Import A Nuxt Project
You can transfer any of your existing repositories from GitHub to Studio. The important thing to note here is that the existing project should have Nuxt Content implementation and include the content folder. This way, you can transfer a pre-existing Nuxt project to Nuxt Studio and start editing its content.
Import Only Content Folder
This feature allows you to import repositories that contain only the content directory. Once you import the .md files, you can edit and use them as you wish.
Now that we have briefly examined the three options, let’s move on to the next steps. Assuming we have selected and installed a ready-made theme, we can list the projects we have created on the Projects screen and start editing them by going into detail.
Manage Your Projects
After entering the project details, you can click the “Edit on Studio” button to enter the Studio editor and start editing your project. You can select the .md file you want to edit from the menu on the left and quickly edit the relevant file from either the Editor or Code tab. Additionally, you can review the changes made from the Changes tab. Below, you can see how the editor looks. We will delve into this area in more detail later.
In the Preview links section, you can view all the active branches and pull requests of your project. Active branches indicate that they have already been imported and are ready for preview. You can hover over any branch or pull request to open the respective preview link.
In the Deployment section, you have the option to quickly deploy your project with GitHub Pages. Additionally, you can also deploy it with Selfhosting if you prefer.
For more detailed information about the mentioned features and other settings, click here.
Edit on Studio
Now let’s take a detailed look at how we can edit our project with Studio. When we click the “Edit on Studio” button, we are presented with a split-screen interface. Here, on the left side, we can access our content and features provided by Studio. On the right side, there is a live preview area where we can see changes made instantly.
Under the Editor section, content can be listed, and drag-and-drop can be used to change the order or update content. In the Media section, you can edit the media used in your project. In the Configs section, you can adjust your application settings. Additionally, in the Design Tokens section, you can make design-related adjustments.
Here, every change made is kept as a draft in Studio, and you can access drafts from anywhere and any device. If you are satisfied with the changes, you can click the Save button to commit and send the changes to your GitHub repository.
When you click the “Save” button, Studio presents you with two options. One is to open a new branch and transfer the changes to that branch, and the other is to commit to the default branch. This way, you can easily update your project’s content and review changes instantly.
Using Custom Components with Studio
Above, we’ve seen how to create a Nuxt project with Studio and how to edit it using Studio. Here, we can download the Nuxt project we created to our local environment if we wish, and we can edit it and create custom components. Changes made and custom components developed locally will be reflected in Studio once committed. We can access our custom components in Studio and use them while creating content.
Let’s quickly go through how we can do these step by step. Let’s download our project to the local environment and set it up after installing the necessary packages. When we examine our project, we’ll see the content folder and the .md files inside it. Here, let’s understand that the index, articles, and contact .md files represent separate pages, and we can update the contents of these pages using these .md files. However, we will continue to update the content through Studio. The only thing we will do locally is to write a component and commit it.
Firstly, let’s create a components folder, and then within this folder, let’s create our card component. This component will accept two props: title and text. After styling it simply, let’s commit the changes and then see how we can use this component in Studio.
After writing our component and committing the changes, let’s switch to the Studio side using the “Edit on Studio” button. Before adding the card, let’s take a look at how the index appears together.
We can easily add the component we created using the Editor or Code section in the left panel. First, let’s see how to do this under the Editor tab. Here, when we start typing the component name, we can add our component with the help of the autocomplete feature.
After adding the component, the view in the editor will look like the following. Here, when we click on the card, we can enter the prop values and update the content of the card.
After entering the prop values, we can see our component and content on the right screen.
Certainly, we could have performed this addition from the Code section instead of the Editor. In the Code section, we can add the component as shown in the following screenshot:
As seen, creating a Nuxt project with Studio is quite simple. We can update the content of the project with Studio, but we can also download it to our local environment and update it there. Additionally, we can write our own components and use them as well.
In summary, Nuxt Studio facilitates the web application development process with its visual interface, live preview, and easy content management features. This platform enhances collaboration between developers and content creators, enabling even non-coders to create impressive web applications. Moreover, Nuxt Content’s content management solutions make the content creation and updating process more efficient.
In conclusion, Nuxt Studio is an ideal option for anyone looking to develop web applications quickly and effectively, thanks to its user-friendly interface and powerful features.
