Practice: Building a Simple Nuxt.js Application
In this practice, we’ll be building a simple Nuxt.js application to reinforce what we’ve learned in the tutorial.
Step 1: Creating a new Nuxt.js project
Use the create-nuxt-app
command to create a new Nuxt.js project. In your terminal, run the following command:
luaCopy codecreate-nuxt-app my-nuxt-practice
Step 2: Creating pages
In the pages
directory, create the following pages:
index.vue
: This will be the home page of your application.about.vue
: This will be the about page of your application.
Step 3: Creating a header component
In the components
directory, create a new component called Header.vue
. This component should contain a header with your application’s title and navigation links to the home and about pages.
Step 4: Including the header component in your pages
In the index.vue
and about.vue
pages, include the Header.vue
component by adding the following code at the top of each file:
phpCopy code<template>
<Header />
...
</template>
<script>
import Header from '@/components/Header.vue'
export default {
components: {
Header
}
}
</script>
Step 5: Adding content to your pages
In the index.vue
and about.vue
pages, add some content to display on each page. For example, on the home page, you could display a message like “Welcome to my Nuxt.js practice”. On the about page, you could display a message like “Learn more about me and my Nuxt.js application”.
Step 6: Running the development server
Start the development server by running the following command in the my-nuxt-practice
directory:
Copy codenpm run dev
Step 7: Testing your application
Navigate to http://localhost:3000
in your web browser to view your Nuxt.js application. Verify that the header component is displayed on both the home and about pages, and that the content for each page is displayed correctly.
This practice will help you get hands-on experience with creating pages, components, and routing in a Nuxt.js application. By building a simple application, you will reinforce the concepts covered in the tutorial and gain a deeper understanding of how to use Nuxt.js.