Developing a Nuxt.js app entirely in your browser

Sep 21, 2018

Developing a Nuxt.js app entirely in your browser

Avatar of svenefftinge Sven Efftinge

A walkthrough to create a fully working Nuxt.js web application with only a browser, using the online IDE for GitHub.

Version 2.0 of Nuxt.js has just been released. It comes with a convenient scaffolding tool that let’s you get started in no time. In the following I will explain the steps necessary to create, run and develop a Nuxt.js application with only a browser using

Step 1: Go to GitHub and create a fresh repository. uses GitHub as its dashboard. That means you start your workspaces from any states of any GitHub project. So new projects are created through GitHub, too:

GitHub Dashboard 'repositories' tab

Clicking anywhere on Github’s Octocat logo on the top left will bring you to your dashboard, where you can create a new repository.

Enter any name description, you can later change it.

GitHub 'Create a new repository' page

Step 2: Start a Gitpod workspace

From your newly created but still empty project you can now start a Gitpod workspace. To do so prefix the GitHub URL with

Start a new Gitpod workspace by prefixng the repo URL with

Step 3: Run yarn create nuxt-app.

Now a workspace with an online IDE is started for you. It will open up the readme (if you have created one) and a terminal.

Using the terminal you can use create-nuxt-app to create an initial project:

**yarn create nuxt-app**

Now simply answer all the prompts as you want.

Step 4: Allow external access to the dev server

By default the dev server doesn’t allow external IPs. To change that so we can access the application running in our cloud container, we need to pass an additional argument to the dev command.

To do so open the package.json file and add the parameter


as shown below:

package.json allow external access to the dev server

Step 5: Start the dev server

Now we can start the dev server and see the application in action.

In the terminal type

**yarn dev**

A notification window will pop up asking you to either open the web app externally or in a view side-by-side to the editor area.

Running app in the Gitpod workspaceRunning app in the Gitpod workspace

Bonus Points

Now you can start changing the application and of course committing to your repo. Also you should consider adding a .gitpod file to the root directory, so the build and dev server automatically startup next time you open a Gitpod workspace.

Here’s the contents:

    - port: 3000
    protocol: "http"
    - command: |
        yarn install
        yarn dev

Dive deeper into Nuxt.js

Now you are all set to dive a bit deeper into Nuxt.js. Checkout the awesome-nuxt repository or the website for further tips and tutorials.

Have fun!

More articles

Blog post: DevX Conf wrap & distributing $10k of open-source funding

DevX Conf wrap & distributing $10k of open-source funding

As part of Gitpod’s Open-Source Sustainability Fund initiative attendees of DevX Conf were able to decide where $10,000 USD of funds (the profits from DevX Conf plus an additional donation by Gitpod) were to be distributed. Here's the breakdown how the fund was split and our retrospective on running our first-ever conference.

Avatar of christinfrohne Avatar of ghuntley Jun 3, 2021

Blog post: Journey to Site Reliability Engineering at Gitpod

Journey to Site Reliability Engineering at Gitpod

The SRE team at Gitpod is making the first moves to implement Site Reliability Engineering best practices. We document our approach to implement our very first Service Level Objective.

Avatar of arthursens May 23, 2021

Blog post: From Gatsby to Svelte in 3 weeks

From Gatsby to Svelte in 3 weeks

A very tight deadline, a small team and a complete redesign - insights into why we use Svelte.

Avatar of mikenikles May 8, 2021