DEV Community

Debbie O'Brien
Debbie O'Brien

Posted on • Updated on • Originally published at debbie.codes

Configure the Nuxt.js server to see your site on your mobile

Sometimes you want to test out your site on your actual mobile device or tablet and not just in the dev tools. This is great when bug fixing or just to see how it looks in a real environment.

By default, the Nuxt.js development server host is localhost which is only accessible from within the host machine meaning you can't open localhost on your mobile.

However you can modify the server in your nuxt.confg.js file.

export default {
  server: {
    host: '0' // default: localhost
  }
}
Enter fullscreen mode Exit fullscreen mode

By assigning the string value of '0' which is short for '0.0.0.0' Nuxt.js will give you your local IP address.

Alt Text

Now instead of typing localhost to see your application you will type your local IP address. In this example mine is http://192.168.0.199:3000/

You can now go to you mobile or tablet and open your website using that link.

The default port is 3000. Should you wish to change it you can also do so by using the port property.

export default {
  server: {
    port: 8000, // default: 3000
  }
}
Enter fullscreen mode Exit fullscreen mode

If this port is already in use, Nuxt.js will give you a random port.

Alt Text

Although you can modify this in the nuxt.config.js file it is not advised to as it might cause you issues when hosting your site. It is much better to modify the host direct in the dev command.

HOST=0 npm run dev
Enter fullscreen mode Exit fullscreen mode

or the port that you want

PORT=8000 npm run dev
Enter fullscreen mode Exit fullscreen mode

or both

HOST=0 PORT=8000 npm run dev
Enter fullscreen mode Exit fullscreen mode

You can even setup a script command in your package.json. For this example I will call it dev:host but you can call it whatever you like. You can add the hostname you always want to use or you can add '0' to get a random one.

"scripts": {
  "dev:host": "nuxt --hostname '192.168.0.199' --port 8000"
}
Enter fullscreen mode Exit fullscreen mode

Which means you only have to run one command when you want to change your servers and the normal dev command for when you want to run on localhost.

npm run dev:host
Enter fullscreen mode Exit fullscreen mode

Although you can now see your site on your mobile you can't share this port with anyone outside of your LAN. That means if you are working remote and want to share your work in progress with someone not on the same wifi connection as you, then this method will not work.

Give it a try and start testing your mobile user experience, while in development, on an actual mobile.

See the nuxt docs for more info

Top comments (4)

Collapse
 
eertmanhidde profile image
eertmanhidde

👌🏼👌🏼👌🏼

Collapse
 
kp profile image
KP

This is amazing, posts like yours are really what the nuxt community needs.

Collapse
 
klukiyan profile image
Kiril Lukiyan

✖ Nuxt Fatal Error │
│ │
│ Error: getaddrinfo ENOTFOUND 0

Collapse
 
egerr10 profile image
egerr10

use 0.0.0.0