Create and Run a Nuxt.js Project

What is Nuxt.js?

Nuxt.js is an open-source framework based on Vue.js for building server-rendered Vue.js applications. It provides rich features like Server-Side Rendering (SSR), Static Site Generation (SSG), automatic code splitting, a powerful routing system, and more, which helps developers efficiently build modern web applications.

Key Features and Benefits of Nuxt.js

• Server-Side Rendering (SSR): Improves page loading speed and SEO performance.
• Static Site Generation (SSG): Pre-renders static pages, enhancing performance and user experience.
• Automatic Code Splitting: Loads only the JavaScript needed for the current page, optimizing performance.
• Built-in Routing: File system-based routing that requires no additional configuration.
• Modularity: Easily integrates third-party libraries and services through module extensions.
• Robust Ecosystem: Nuxt.js has a rich collection of plugins and modules, making development seamless.

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

Creating and Running a Nuxt.js Project with ServBay

In this article, we will use ServBay’s Node.js environment to create and run a Nuxt.js project. We will use ServBay’s 'Hosts' feature to set up the web server and use reverse proxy and static file services to access the project.

Creating 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 command:

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

   Follow the prompts to enter the project name (recommended to name it servbay-nuxt-app) and select 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

Modifying Nuxt.js Project Output Content

1. Modify pages/index.vue File

   Open the pages/index.vue file, and modify its contents to 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>

Entering Development Mode

1. Run Development Server

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

   npm run dev -- --port 8585

   This will start a local development server and expose it on port 8585.

2. Configure ServBay Host Reverse Proxy

   Use ServBay’s 'Hosts' feature to access the development server via reverse proxy. In ServBay’s 'Hosts' 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 configuration steps, refer to Adding a Nodejs Development Website.

3. Access Development Mode

   Open your browser and visit https://servbay-nuxt-test.dev to see your project in action. With ServBay’s support for custom domains and free SSL certificates, you enjoy higher security.

Building Production Version

1. Build Production Version

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

   npm run build
   npm run export

   Once the build is complete, the generated static files will be in the dist directory.

2. Set up Static File Service

   Use ServBay’s 'Hosts' feature to access the production version through static file serving. In ServBay’s 'Hosts' settings, add a new static site:

   • 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 see the built production version. With ServBay's custom domain and free SSL certificate, your site will have higher security and reliability.

By following these steps, you successfully create and run a Nuxt.js project and manage and access your project using ServBay’s features.