Nuxt.js Fundamentals (Nuxt 2)
🚧 PLEASE NOTE: An updated version of this course is available! see the Nuxt Fundamentals: Build Full-Stack Vue.js Apps course. This course is outdated!

Adding a Navbar to Nuxt Apps

In this lesson, we're exploring where to put your navbar and other parts of your application that will be present on all pages.

LESSON TRANSCRIPT

Όταν θέλετε να χρησιμοποιήσετε ένα μέρος που θα βρίσκεται σε όλες τις περιοχές, όπως ένα Navbar ή ένα Sidebar, το Layout είναι το μέρος που θα το βρίσκετε. Το επόμενο κομπονέτο θα δημιουργήσει τα πληροφορία της ActivePage. Για να προσθέσουμε ένα Navbar στο κομμάτι, μπορούμε να το βρίσκετε εδώ. Ακόμα είναι πάντα ωραίο να δημιουργήσουμε ένα κομπονέτο, οπότε θα κρατήσουμε το βιβλίο μας ευκολογικό και χρησιμοποιημένο.

Λοιπόν, αν θα δημιουργήσουμε άλλο Layout αργότερα, θα μπορούμε να δημιουργήσουμε που θα οδηγήσω το Navbar, γιατί θα έχουμε μόνο ένα παράδειγμα. Ας προσθέσουμε κάποια σημασία και παίξουμε το CSS που έχουμε προετοιμασμένο στο στυλ. Γιατί δεν έχουμε μιλήσει για τα επόμενα σχέδια, ακόμα έδωσα αυτό το σημασιακό σημείο στο Navbar, το οποίο θα το κατασκευάσουμε αργότερα σε ένα άλλο βίντεο. Μετά στο component layout, μπορούμε να προσθέσουμε το Navbar και να το σχεδίσουμε πριν από το επόμενο tag.

Τώρα, στο μπροζόρυο, το Navbar παρουσιάζει σε όλες τις πόδες. Καλό! Όταν θέλετε να χρησιμοποιήσετε ένα μέρος που θα βρίσκεται σε όλες τις περιοχές, όπως ένα Navbar ή ένα Sidebar, το Layout είναι το μέρος που θα το βρίσκετε. Το επόμενο κομπονέτο θα δημιουργήσει τα πληροφορία της ActivePage.

Για να προσθέσουμε ένα Navbar στο κομμάτι, μπορούμε να το βρίσκετε εδώ. Ακόμα είναι πάντα ωραίο να δημιουργήσουμε ένα κομπονέτο, οπότε θα κρατήσουμε το βιβλίο μας ευκολογικό και χρησιμοποιημένο. Λοιπόν, αν θα δημιουργήσουμε άλλο Layout αργότερα, θα μπορούμε να δημιουργήσουμε που θα οδηγήσω το Navbar, γιατί θα έχουμε μόνο ένα παράδειγμα. Ας προσθέσουμε κάποια σημασία και παίξουμε το CSS που έχουμε προετοιμασμένο στο στυλ.

Γιατί δεν έχουμε μιλήσει για τα επόμενα σχέδια, ακόμα έδωσα αυτό το σημασιακό σημείο στο Navbar, το οποίο θα το κατασκευάσουμε αργότερα σε ένα άλλο βίντεο. Μετά στο component layout, μπορούμε να προσθέσουμε το Navbar και να το σχεδίσουμε πριν από το επόμενο tag. Τώρα, στο μπροζόρυο, το Navbar παρουσιάζει σε όλες τις πόδες. Καλό!

This transcript is generated automatically from the lesson video. Spotted an inaccuracy? Let us know at team@vueschool.io.