Homepage

What is in this repository?

This repository shows you the basics of building a Nuxt app with 2 pages and a navigation:

The index.vue (located in the pages directory) file contains the classic structure with traditional CSS and serves as a hompepage. The example.vue (located in the pages directory) file demonstrates the structure using Tailwind. The navigation.vue file (located in the components directory) contains Nuxtlinks to those pages.

What is the difference between the index.vue file and the example.vue?

The index.vue file is build with classic HTML and CSS using id's & classes. The html snippet of the title looks like:

This code is classic HTML of an element that has the class named "title".

The Example.vue file is build with Tailwind CSS and uses utility classes. The html snippet of the title rewritten with Tailwind looks like:

This code is HTML of an element that has 2 Tailwind utility classes "text-6xl" and "font-bold".

Click here for more info on Tailwind from the coursebook.

Click here for more info on Tailwind and its utility classes.

How to create new pages in your app?

Step 1: Copy the example.vue file to add new pages on your application.

For instance: copy the example.vue file and name it example2.vue. Change the content of this new page using Tailwind utility classes.

Step 2: Create a new link in the navigation.vue file for each new page to make it accessible.

This code is HTML of a link to a file called "example2" and should be added in navigation.vue.

How to setup and publish this repository?

This repository should be installed using the same procedure as we have installed other repositories for this course. For publication: create a new repository on Github, link the repo to a Netlify site and change the build settings and url.

Click here for more info on publishing with Github and Netlify.