Create and Run a Nuxt.js Project

What is Nuxt.js?

Nuxt.js is an open-source framework built on Vue.js for creating server-rendered Vue.js applications. It offers a rich array of features such as Server-Side Rendering (SSR), Static Site Generation (SSG), automatic code splitting, a powerful routing system, and more, allowing developers to efficiently build modern web applications.

Key Features and Advantages of Nuxt.js

• Server-Side Rendering (SSR): Improves page load speed and SEO performance.
• Static Site Generation (SSG): Pre-renders static pages to enhance performance and user experience.
• Automatic Code Splitting: Loads only the JavaScript code required for the current page, optimizing performance.
• Built-in Routing: File system-based routing requires no additional configuration.
• Modularity: Easily integrate third-party libraries and services through module extensions.
• Robust Ecosystem: Nuxt.js has extensive plugin and module support, making development more convenient.

Using Nuxt.js helps developers build modern, responsive web applications more efficiently.

Create and Run a Nuxt.js Project Using ServBay

In this article, we'll use ServBay's Node.js environment to create and run a Nuxt.js project. We'll use ServBay's "Host" feature to set up a web server and access the project via reverse proxy and static file serving.

Create a Nuxt.js Project

1. Initialize the Project

   First, ensure you have installed the Node.js environment provided by ServBay. Then, initialize a new Nuxt.js project using the following commands:

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

   Follow the prompts to enter the project name (suggested name: servbay-nuxt-app) and choose other options as needed:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm
   ? UI framework: None
   ? Nuxt.js modules: Axios
   ? Linting tools: ESLint
   ? Testing framework: None
   ? Rendering mode: Universal (SSR / SSG)
   ? Deployment target: Server (Node.js hosting)
   ? Development tools: jsconfig.json (Recommended for VS Code)

2. Install Dependencies

   Navigate to the project directory and install dependencies:

   cd servbay-nuxt-app
   npm install

Modify Nuxt.js Project Output Content

1. Modify pages/index.vue File

   Open the pages/index.vue file and modify its content to make the page display "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

Enter Development Mode

1. Run the Development Server

   Start the development server and specify a port (e.g., 8585):

   npm run dev -- --port 8585

   This will launch a local development server and expose port 8585.

2. Configure ServBay Host Reverse Proxy

   Use ServBay's "Host" feature to access the development server via reverse proxy. In ServBay's "Host" settings, add a new reverse proxy:

   • Name: My first Nuxt.js dev site
   • Domain: servbay-nuxt-test.dev
   • Host Type: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   For detailed setup steps, refer to Adding a Node.js Development Website.

3. Access Development Mode

   Open your browser and visit https://servbay-nuxt-test.dev to view the project in real-time. ServBay supports custom domains and free SSL certificates, giving you enhanced security.

Build Production Version

1. Build Production Version

   Once development is complete, build the production version using the following commands:

   npm run build
   npm run export

   After building, the generated static files will be located in the dist directory.

2. Set Up Static File Serving

   Use ServBay's "Host" feature to access the production version via static file serving. In ServBay's "Host" settings, add a new static website:

   • Name: My first Nuxt.js production site
   • Domain: servbay-nuxt-test.prod
   • Host Type: Static
   • Website Root Directory: /Applications/ServBay/www/servbay-nuxt-app/dist

3. Access Production Mode

   Open your browser and visit https://servbay-nuxt-test.prod to view the built production version. With ServBay's custom domains and free SSL certificates, your website will have enhanced security and credibility.

By following the above steps, you successfully created and ran a Nuxt.js project and used ServBay's features to manage and access your project.