Installing and Configuring a Nuxt.js Project
Install Node.js
Make sure you have Node.js installed on your computer. You can download the latest version from the official Node.js website.
Install Vue CLI
Open your Terminal or Command Prompt and run the following command to install Vue CLI (if not already installed):
npm install -g vue-cli
Create a Nuxt.js Project
In the Terminal, navigate to the directory where you want to create your project and run the following command to create a Nuxt.js project:
vue init nuxt-community/starter-template my-nuxt-project
Project Configuration
Follow the prompts in the Terminal to configure your project. You can choose various options for your project, such as using ESLint, installing Axios, etc.
Creating the First Page and Displaying Basic Content:
Open Project Directory
Open your Terminal and navigate to the project directory using the command cd my-nuxt-project
(or the folder name you chose).
Create a New Page
Use the Vue CLI to generate a new page with the following command:
npx vue-cli-service generate page mypage
Edit the New Page
Open the mypage.vue
file in the pages
directory and edit the content of the page. You can add HTML, Vue components, and data.
Display the Page
In the layouts/default.vue
file, you can use the <nuxt/>
tag to display the content of the page.
Run the Project
In the Terminal, run the following command to start the project and view your page in the browser:
npm run dev
Now you have your first page in the Nuxt.js project and can customize the content as desired.