This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Get started
Already a member? Sign in to continue
Playing
17. Public files

Transcript

00:00
Okay, now we're going to talk about public files. These are files that you don't need to be bundled in with your Nuxt code, but are publicly available in your web route.
00:11
So these will be things like images that you don't want to be included in your build, but want to be available so you can include them on your pages. So for example, that could be a logo. At the moment, we've got a pretty terrible looking homepage,
00:24
but we're going to go ahead and put a logo just at the top here. So how do we do this? Well, let's go ahead and just create a new folder in the root of our project called public. Anything that goes inside of there will now be available in your web route.
00:40
So if we just come over to that public directory that we've just created, I'm going to go ahead and drag over the Codecourse logo and move that over. Let's get back over to our project here, and let's try and access this like we would as a web server.
00:54
So if we hit logo.svg, sure enough, that is now available to us. So now what we can do is pretty much just include it like a normal file that we would on an HTML page. So if we head over to index.view under pages,
01:06
we can just add this at the very top here, image source, and just end that off, and just slash logo.svg. And of course, you could have sub directories in here that would still work. Just categorize things however you need to.
01:20
But now that we've done that, you can see the logo is available on the homepage. I'm just going to go ahead and add a class of logo to this. I created that over in our style sheet. So if we just come over to assets and app.css,
01:34
that's just giving that a width of 100 pixels. So if we come back over, there we go. We've got our logo on the page. So things that you wouldn't necessarily include in your public
01:43
would be style sheets that you want to be ran through the build as you are writing things. For example, we're using SCSS here, or SAS. So that needs to be built and bundled,
01:54
which is why we don't put that in our public directory. But we do put things like images. In fact, you could bundle SVGs if you wanted to. But really, your public directory is just for anything
02:04
that you do not need to be bundled in. Logos are a good example, and just standard images as well, as well as any other files that you need to be available in the root of your web server when you're running Nuxt.
18 episodes1 hr 15 mins

Overview

Nuxt is a framework built on Vue that makes development of applications a breeze. In this series, we'll get set up with a fresh project and work through everything you need to know to start building with Nuxt.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.