Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

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

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.

Episode summary

In this episode, we dig into the concept of the public folder in a Nuxt project. If you have files—like images or logos—that you don't need to be included in your code bundle but should still be accessible publicly, the public folder is the perfect spot for them.

We walk through creating a public directory in the root of your project and show how any files you drop in here will be directly available on your web server. As an example, we add a logo SVG, then reference it right at the top of the homepage with a normal <img src="/logo.svg"> tag. We even touch on organizing your public assets by using subdirectories if you want to keep things tidy.

Finally, we briefly look at some styling, giving our logo a size in the app.css file. We also discuss that certain things—like stylesheets written in SCSS/Sass—shouldn’t go into the public directory because they need to be compiled and bundled. The public folder is really just for things you want directly available at their URL without any special processing. This is a great spot for logos, plain images, and other assets you want the webserver to serve as-is.

Episode discussion

No comments, yet. Be the first!