Learn Vue.js – Tutorial for Beginners

Key Takeaways

Welcome to this comprehensive Vue.js course for beginners. Vue.js is a progressive JavaScript framework known for its simplicity and versatility. In this course, you will learn how to use Vue.js to build fully functional interactive applications. And by the end, you'll be able to create a clean, organized, and productionready application that utilizes all the fundamental features of Vue.js. Rachel Johnson from Scribba developed this course. Welcome to Scribba's Learn View course. This is a beginner-friendly journey that will help you master the fundamentals of Vue.js. Whether you're new to JavaScript frameworks or looking to add Vue to your toolkit, this course is designed to get you up and running. In this course, you'll learn the basics of Vue, one of the more popular JavaScript frameworks for building user interfaces. Vue is known for its simplicity, flexibility, and performance, making it an excellent choice for both small projects and large scale applications. As we learn about Vue from the ground up, we'll be building six Vuepowered projects that are perfect for practicing your newfound skills. By the end of the course, you'll have a solid foundation in Vue and the confidence to start building your own projects. We'll start with a simple viewfax page where we'll learn how to display dynamic data within what's called components. Then we'll create a page from Grammar's recipe book. This simple app lets users click between photos, ingredients, and instructions, all using data from external files. Next up is this animal shelter listing where you'll learn to filter data by type and display dynamic descriptions. Our fourth project is a daily gratitude pad where you'll build a realtime journaling app that timestamps and displays your entries throughout the day. Getting more advanced, we'll create a Pokédex application that pulls data from an external API. The perfect way to learn how Vue handles external data. And for our capstone project, you'll build definition detective, a word guessing game that uses a dictionary API to display real definitions as part of the gameplay. Now, don't worry if some of these projects sound complex. We'll break everything down into manageable steps, and by the time you get to the project, you will have all the skills that you need. In section one, we're going to focus on getting started with Vue. We'll start by introducing Vue, what it is, and why we should learn it. You'll learn how to create your first Vue app using a CDN, turning a static web page into a dynamic one. Then we'll install Vue locally using create Vue, the official Vue project scaffolding tool and you'll explore the anatomy of a Vue project. Now before we go ahead, let's talk about prerequisites. Since this is a Vue course, it is important to have a basic understanding of HTML, CSS, and JavaScript. Vue builds on these foundational technologies, so familiarity with them will help you get the most out of this course. I'm Rachel Johnson and I'll be your instructor for this Learn View course. I'm a lifelong learner, passionate teacher, and a big believer in making learning accessible and fun. So, let's dive into Vue together and build some amazing things. Let's start with a super important question. What is Vue? Well, Vue is a progressive JavaScript framework that makes building user interfaces and single page applications a breeze. Created by Evanu in 2014, Vue has grown to be one of the more popular front-end frameworks in the world alongside React and Angular. In this course, we'll be focusing on Vue 3, which is the latest major version of the framework. At the time of this recording, the latest stable release version is 3.5.17. Now, view likely would have updated by the time you're learning. So, there might be some slight differences between what you see here and what you encounter in the real world. But don't worry, if the changes are significant, we'll be sure to update your learning experience accordingly. So, with so many other options out there, why should we learn Vue.js? Well, it isn't just another JavaScript framework, and the numbers really back this up. Stack Overflow's 2024 developer survey shows Vue as the fourth most popular front-end JavaScript framework with an impressive 60.2% admiration rating, which is just 2% below first place. The State of JavaScript 2024 report paints an even more compelling picture with Vue ranking second in usage, awareness, and developer positivity, and third in interest, and retention. And these rankings have either held steady or improved over the last few years. The open-source community's enthusiasm for Vue is evident in its GitHub statistics with over 28,000 stars and 33,000 forks. But it's not just independent developers who love Vue. Industry giants like Adobe, Nintendo, the Alibaba group along with popular services like Zoom, GitLab, Grammarly, Netlefi, and Trust Pilot all use Vue in their production environments. And perhaps the most telling is Vue's consistent growth in adoption. 5 to 6 million weekly downloads on npm with steady year-over-year growth. These numbers aren't just statistics. They represent a thriving ecosystem and a framework that is here to stay. This means that Learning View isn't just about picking up another tool. It's about investing in a skill that's increasingly valued in the job market and supported by a robust growing community. Time to stop talking about Vue and start actually using it. In the next Grim, we'll take our first hands-on steps with Vue by exploring some core concepts and setting up a developer environment. Are you ready to start building? Let's jump into some code. Before we dive into setting up Vue locally or using build tools, we're going to start with something simple, which is using Vue via a CDN. This means we can include Vue in our project with a script tag in our HTML file. This will let us skip the setup process for now and jump straight into making those fingers busy. You'll see how easy it is to get started with Vue and how powerful it can be even in its simplest form. If you're new to Scribbler, this editor is where the magic happens. You're able to see live code examples, pause me at any time and edit the code directly to try things out yourself. When I present you with challenges, which I will throughout the entire course, the editor will pause automatically and let you have a go in your own time. If you're following along on another platform like YouTube, we'll talk about how to install Vue locally in a few scrims time so you can practice in the comfort of your own IDE. But for now, I invite you to hop on over here to scrimmer.com to get your fingers busy with Vue. For our very first Vue app, I've put together a very basic HTML file. We'll include Vue via the CDN and then use Vue to display a message on the page. This will give you a pretty good taste of Vue. And in the next scrim, you're going to give it a go yourself. To start using Vue, we're going to include the library using a CDN. And to do that, all we have to do is add a script tag in the head of our HTML file right here and specify the source location just like any other CDN. And the best place to grab the CDN source URL directly is the official Vue documentation. Now, I've already copied the script tag. So, I'm just going to pop it right here. And now, once I've saved, we have access to all the features of Vue3 and we can start using it directly in our application. Now, view works by attaching itself to a specific part of the HTML, usually a div, and then controlling what happens inside of that element. So, first we're going to wrap everything in the body tag inside of a div and give it an id of app. So, div with an id of app. And then I will also close the div and then indent everything inside of it. Now, let's have a look down here at the H1 where it says hello world. We're going to use Vue to change out the world of hello world to a name of our choice that we'll define using Vue. To prepare for that, I'm going to replace this world with this curly brackets name and then closing curly brackets. And once we save, we can see that that has been reflected in the preview. Now, notice the curly brackets. This is Vue's text interpolation syntax. We will get more into this later, but for now, just know that it will tell Vue to render the value of a name variable inside of the H1 tags. But what is name? Well, we're going to define that in our JavaScript. So, in order to use JavaScript, we're going to open script blocks down here. And this is where we're going to start using Vue. I'm going to type up a bunch of code, but I will explain it as I go. So, first is const create app and ref equal view. What's happening here is that I'm grabbing the create app and ref functions from Vue. These are functions that we will explore more of throughout the course. So don't worry too much about them right now. Just know that I'm essentially importing them so we can use them. Next up is create app and then brackets and then curly brackets. With this line, I'm using the create app function that we just imported right here to you guessed it create a view app instance. Everything inside of it defines how the app will behave. So inside the curly brackets, I'm going to start with a setup function. This function gets run the moment that our app loads. And this is where we'll define our data and logic. So let's add some data. Create a constant with the name of name. And here I'm going to type ref and then Rachel. Ref is something that we'll explore later. But for now, think of it as a view variable. Then we have to make sure we can access name from the HTML by returning it. So return name and finally down here at the closing bracket of our create app we're going to add mount and then we're going to specify something with an ID of app. Do you remember that div earlier up here? This is where it all connects up. Everything that we've done in this script block inside of this create app function will apply to the div with an ID of app. And once we save, we can see that our preview now shows hello Rachel rather than hello world. So what's happening behind the scenes? When the page loads, view takes over this div with an id of app and it replaces this name with the value of name which we set and returned down here in our JavaScript. And just like that, you've learned the very very basics of Vue and how we can extend a standard HTML file. In the next scrimm, you're going to take a static web page just like this one and turn it into a view app just like what I did in this scrim. So, I will see you there. Welcome to your first challenge of the course. This scrim was designed to give you a hands-on opportunity to apply what you've learned in the last scrim. Here, I've put together a simple 404 page that has a few elements to it. There's a span with an emoji, a H1 with an error code, a P tag with some error text, and a button. I'd like you to have a go at getting this vanilla HTML page set up with Vue, and then use Vue to change the text content of these four elements. Now, while you can skip challenges here on Scriber, I really encourage you to give it a good go. After all, the best way to learn anything is to do it. So, here is your challenge. Turn this static 404 page into a view app using the CDN. Then make it your own by using a different emoji, status code, and text. To do that, I've split it up into five steps. First, you'll have to include the view CDN. And then you have to prep your HTML by wrapping everything in a div with an ID of app. And then in new script tags, you'll have to import the create app and ref view functions. Then create a view app instance and mount it. And finally, you'll have to create the four ref variables and use them to change the text content of the four elements, which is the span, the h1, the p, and the button. Now, if you need to, I have popped the exact syntax that you'll need over here in hint.md. But do try to give it a go on your own first. And remember, you can always refer back to previous scrims if you need a quick reference. Give it a go now, and I'll walk you through how I'll do it afterwards. Welcome back. How did you go? This is what I would have done. So, first we'll include view via the CDN. And I'm going to do it just before the closing head tag. And then I'll prep the HTML by wrapping the body content, which is all of this inside of a div with an ID of app. So, div with an id of app. And we'll close that. And then also indent everything. Now we can swap out the static content for all four HTML elements and replace them with the dynamic content using those curly brackets. Instead of this hard-coded emoji, I'll pop in some curly brackets and replace it with the word emoji. And I'll do the same with this 404. Some curly brackets and I'll call it status code. Moving down to the P tag, we'll replace this entire line with curly brackets status message. And then instead of the buttons go back to safety, we'll replace it with curly brackets and button_ext. And now we can see that the preview has changed. And it looks like this because we haven't actually created the app yet. So let's go and do that. Before the closing body tag, we're going to create our script block. Script script. Inside the script block, let's import the relevant view functions. So const, we're going to import create app as well as ref from view. And then we'll create the view app instance and also mount it right now. So create app, we'll leave this blank for now. And on the other end, we're going to mount it to something with an id of app. Now that we've created the app and also mounted it to the div with an ID of app. These emoji, status code, and status messages are now looking for the matching variable, which doesn't exist yet, and therefore it's showing nothing. So let's get those variables set up. Inside of the curly brackets, we're going to use the allimp important setup function. Remember, the code in here gets run when the app starts. So, inside of the setup function, we'll create the four variables. One for each of these elements that we've prepped earlier. So, first the emoji, making sure to use the ref function. And here, I'll just use a monkey. Next is status code. And here, let's just do 500. Next is the status message. And we'll do something super short. server is sleeping. And finally, the button text. And here we'll just show my age. Bye by by. And now to make sure that the HTML can access these variables, we will return them. So return emoji, status code, status message, and button text. Save. And there we go. Great job on that challenge. You've just taken a static web page and turned it into a dynamic Vue app by making parts of it reactive. That's a big step forward and you should feel proud of what you've accomplished. V's reactivity system is powerful. And you're already starting to see how it can make your applications more dynamic and easier to manage. Now, I know this seems super simple at the moment, but trust me, Vue gets a lot more exciting very quickly. These first few scrims were just about getting your brain thinking the Vue way and getting your fingers busy with the basics. In the next scrim, we're going to leave the CDN behind and install Vue for Real using npm. This is how most real world Vue projects are set up, and it unlocks a whole new world of tools and features that will make your development process even smoother. So far, we've been using Vue via a CDN, which is a great way to get started quickly. But in most real world Vue projects, Vue is installed locally using npm. And in this scrim, we're going to take that next step and install Vue locally using the official Vue project scaffolding tool, create Vue. And we're going to do it right here in the Scribba interactive editor. This handy command line tool does exactly what it says on the tin. It spins up a view project right where we want it. So here in the editor, I'm going to type npm create view at latest. Always include this at latest to make sure you're using the most upto-date version of create view. Without it, MPM might actually resolve to a cached or outdated version. Under the hood, create View leverages Vit, a fast and modern build tool to power both the development server and the production build. With create view, we get a project preconfigured with VIT for an efficient and enjoyable development experience. If you want to learn more about Vit, we do have an intro to V course right here on Scriber. Back in the terminal, we'll say yes to installing create view by entering Y. The command line will now ask us a few questions to set up the project the way we want it. First, it asks for a project name. This is pretty self-explanatory. What do you want to call your view project? Create view will then create a folder in the current directory with this name and spin up your project inside of it. We can also use just a dot here if we want the project to be scaffolded in the current directory. If we do this, we will have to supply a package name. So, we're going to call this one my view project because I'm super imaginative. The remaining prompts are all about customizing the features and tools you want included in your project. Each option will either add packages or configure settings that extend the functionality of your project. We won't select any of these now, but I just wanted to show you how customizable View can be even from the setup process. We'll press enter to move along and we'll also get a chance to install any experimental features which we won't at this stage. Once we've answered all the prompts, create view will go ahead and scaffold the view project for us. Just like that, we can see that there are a bunch of files and folders that have appeared in our current directory such as this package.json. We can see a pretty standard package.json here. We have the allimportant view package listed as well as Vit dependencies needed to get us running. We can even see up here in the scripts that vit is used to power everything. Back to the terminal. Once the project was created, create view left us some instructions in the terminal which is mpm install followed by mpm rundev. So let's follow them. First mpm install or mpm i. This installs any and all dependencies listed in package.json. Now this is actually what will install Vue itself and any extras that we may have specified. Now, this may run for a little bit, so sit tight and done. And now we can run the other one, which is npm rundev. Now, this starts the development server, and we'll actually see Vue's starter project pop up in this preview window. And just like that, we have a Vue project set up and ready to go. In the next Scrim, it's your turn to give it a go to try and set up a new Vue project. In the last scrim, I walked you through how to spin up a new Vue project. And in this scrim, you're going to give it a go yourself. This will probably be a quick scrim, but it will be a good opportunity for you to have a go rather than just watching me do it. So, here is your challenge, which I've already put here in challenge.md. Use create view to spin up a new Vue project, then install and run it. Now, if you choose to scaffold the project into the current directory, which we did in the last scrim, create view will ask about removing everything in this directory in order to do that. Since all we have here is this challenge.md, feel free to say yes. This is how to do it. So, down here in the terminal, we'll type mpm create view at latest. For the project name, I'm going to put a dot because I want it to scaffold into this directory. The current directory is not empty. Remove existing files and continue. Yes, that is totally fine. The package name will be view project. And I will choose to install none of the features and none of the experimental features either. Next up, I'm going to install with npm install, which might take a while. Once it's installed, we can run the app with mpm rundev. And there we go. In the next scrim, we'll take a closer look at what create view has spun up for us. We'll explore the project structure, dive into the files, and start understanding how everything fits together. But for now, take a moment to celebrate. You've just set up your first view project like a pro. Now that we've set up our view project using create view, let's take a look at the project structure that it generated for us. Now, I do know this might seem like a lot to take in at first, but don't worry. We'll learn about everything in detail over the rest of the course. For now, just think of it as a quick tour of your view projects anatomy. So, first, you'll notice that create view has spun up a bunch of files and directories. We're going to go straight into the directory that you'll be spending most of your time in, which is this source folder. First, we have an assets folder, which, as you can imagine, would house your project's assets. Inside of it, we can see some CSS files as well as an SVG file. Pretty standard assets. And then we have this components folder where our components will live. Now, don't worry. Components are just chunks of code that will make up your app's interface. We'll get into that concept real soon in the next section. And then moving down, we have app.view. Now, this is the heart of your application. It's the home of your Vue project. At a glance, we can see some JavaScript at the top between some script tags. We've got some HTML in the middle between some template tags and then even some CSS down here inside of style tags. We will learn about this unique format very very soon. And then we have main.js. This is a super simple JavaScript file that links our HTML to our Vue project. Some of the code here might ring a bell. import create app from view dotmount id app. We saw this kind of logic a few scrims ago when we were using the view CDN. Well, in an installed view app, this is where that logic sits. Okay, let's come out of the source folder and into this index.html. This is the HTML file that gets served as the landing page of our website, just like any other index.html file. For the most part, you won't need to make any changes here. Let's have a look. Down here at the bottom, we have our script tag, which imports the main.js file. And just above that, we have our div with an ID of app. This is where your entire view app will be mounted. And then all the way up here, we have your public folder. This is where we'll put files that we want exposed to the public as is. For example, static assets like favicon files. Now, let's step down here to these four files under configuration. These files make Vue work under the hood. And if you've worked with other frameworks or NodeJS, they should look familiar. First, we have jsconfig.json. This file determines which files should be compiled when we build the project. Here, we can see that everything in the source folder is included and anything in the node modules or disc folders are excluded, which is pretty standard. Then we have package.json and package lock.json, which we've already talked about. They list dependencies like Vue and Vit and developer tools as well as any scripts that you'll need to run or build your project. And finally, we have Vit.config.js. Now, this file contains config settings for Vit, which as you may remember is the build tool that powers your project. Here [snorts] we can see that Vue and Vue dev tools have been imported and then applied as plugins for Vit. If we wanted to for example disable view dev tools at the moment it's as easy as commenting that line out or deleting the line completely. Now we are going to do that as we don't need view dev tools just yet. And then down here we have what's called an alias which we'll talk about later in the course. For the most part you won't need to work too heavily with these config files but it's good to know what they do and why they're here. Again I know this might feel like a lot to take in. This is a fairly fleshed out starter project for a beginner, and it's natural to feel a little overwhelmed at first. But here's the good news. From now on, I'll only include the files that we need to focus on. That way, we can break things down step by step and build your understanding gradually. For now, just remember, source is where you'll spend most of your time building your app. App.view is the main view file, and index.html HTML is where the app will be mounted to your HTML via main.js. In the next scrimm, we'll do a quick recap of everything we've covered in this section. From setting up Vue to exploring its anatomy, it's the perfect way to reinforce what you've learned and get ready for the exciting journey ahead. And that's it for this first section. Let's take a moment to recap what we've learned so far. We started by introducing Vue, what it is, and why we should learn and use it. Then we created our first Vue app using a CDN, turning a static HTML web page into a dynamic one. After that, we installed Vue locally using create Vue and got a fully set up Vue project ready for development. And finally, we explored the anatomy of that project, breaking down its structure and understanding the purpose of files and folders in it. You've come a long way already and you should be proud of what you've accomplished. You've gone from zero to having a fully functional Vue project set up and ready to build on. That's no small feat. And I just wanted to let you know that it's perfectly normal to feel a little overwhelmed at this stage. Vue is a powerful framework and learning it takes time and practice. But here's the good news. You've already taken the hardest step, which is to get started. Every great developer started where you are right now. And the key to success is persistence. Keep practicing, keep experimenting, and don't be afraid to make mistakes. That's how you learn and grow. In the next section, we're going to dive into the fundamentals of you. Think of this section as packing for your adventure. And the next section, you're going to go on it. Let's keep this momentum going, and I will see you in section two. Hey there, and welcome to section two. In this section, we're going to take your view skills to the next level. We'll build on what you've learned in the previous section and dive into some powerful view features that will make your apps more dynamic and modular. Here's what's on the menu for this section. First, you'll learn how to break your app into bite-sized logical pieces with Vue components. And then, we'll discover how to simplify your import paths with the AT alias. Next up, you'll learn about Vue's reactivity system, which goes handinhand with Vue's template syntax. And finally, we'll look at how to use images and assets in Vue. For our project this section, we're going to build a very simple Vue fact app. It's a one pager that features the Vue logo and three facts about this awesome framework. We'll work on this project over three scrims, tackling a new concept in each one as we go. But between those scrims, we're going to learn about these features of Vue so we can use it. For each key concept that we'll cover, here is the learning process that we're going to follow. First, I'm going to introduce each concept in a simple and clear way so we can understand the theory. And then you'll see it in action with me showing you the concept in context. And once we've done that, you'll put your understanding to the test by practicing with a challenge. And finally, we will apply what you've learned into the View Facts app. This approach will help you build confidence while seeing how everything connects in a real project. By the end of the section, not only will you understand these concepts, but you'll also see how they work in a real project. Plus, you'll have a cool Viewfax app to show off in your portfolio. So, are you ready to level up your Vue skills? Let's get coding. We're going to kick off our fundamentals with the core feature of Vue, the Vue component. In Vue, everything starts with a component. It's a special file format that contains the HTML, CSS, and JavaScript in one neat package. Let's see it in action. In this Grim, I've set up a fresh install of Vue using create view. In the source folder, we've got app.view and main.js, which is what actually mounts our view app to the HTML. We've also got main.css inside of our assets folder. Let's head inside app.view where most of our work will be done in. And here we have the default app.view file that create view scaffolded for us. Late in the last section, we had a very brief look at the contents here. And now it's time to really have a look. We can see that there are three blocks. There's the script section at the top, a template section in the middle, as well as a style section here at the bottom. To make it even easier to look at, let's get rid of all the content inside each of these blocks. What we have left is this skeleton of what's called a single file component. This structure plus this view file extension is a special file format that allows us to work on the template logic and styling of a view component in one file. the classic trio of HTML in the template, CSS in the styles, and JavaScript in the script section. Our core app.view file is in itself a component. And that's why I said earlier that in Vue everything starts with a component, this component. I'm going to drop in a bit of content. And then I'm going to run the app with mpm install and mpm rundev. Does this look familiar? It should. This is the one pager that we played around back in the first section. I bet you probably recognize some of the code before I even ran the app. Back then, we used a plain HTML file and a CDN to get Vue working in our project. What you're seeing now is the exact same project, but implemented as a view component. To make the comparison cleaner, here is what the CDN versions JavaScript look like. And down here is the JavaScript that we need for a view component. Do you notice how much cleaner and simpler the view component version is? In the HTML version, we had to use create app and mount to initialize the view app. And then we had to wrap everything in the setup function and explicitly return each of the variables. But in the view component, all that boilerplate code is handled for us. Here we just have to import ref and then define our variables which can then be used directly in the template section. Like you can see down here, all we have to do is include this setup keyword within the script block up here. Doing that essentially turns this entire block into this setup function. Now, moving down to the template. This should look pretty much the same as the original HTML. We've taken everything from the body tag and popped it into the template section instead. This means we only have to concern ourselves with the content and none of the metadata that we would normally handle in the head section. And of course down here we have our style block. I had a lot of this in a styles.css file in the original. Every rule here is relevant to a HTML element up here in the template. And it's much easier for us to refer to while working in this component. If I wanted to change the styling of elements in the component, I can do it right here rather than waiting through a bunch of CSS in a CSS file. So essentially everything that you see here in the preview is being determined by this single file component right here. This app view. And now I'm going to challenge you to have a play. Your challenge is to make the copyright year down here dynamic and blue. In the script tag, you'll have to create a new ref to house a different year. And you can use the existing ones as a reference. In template, you'll have to change this static 2025 to render that new variable that you've created. And to do that, you can refer to how I've done them here. And in the style section, target the paragraph tag in the footer and make it blue. Give it a go now. And I'll see you on the other side. First, I created a new variable and I called it year. And then using the two above it as a reference, I followed it with ref function. And then I use 2014, which is the year that Vue was first publicly released. And then I'll render it in the template using the same syntax that I see for emoji and name. So instead of 2025, I put in these curly brackets. And inside of it, I referred to year, which is what we created up here. And then finally, down here in the styles, I targeted the footers paragraph tag and I made the color blue. And now when I save, we can see that the change has been made down here. So great work. You've just met the view single file component or the view file. It bundles together your HTML, CSS, and JavaScript all in one neat little package. Now, if that's making you raise an eyebrow, hold on to that thought. We'll explore your concerns in the next scrim. At this point, you're probably thinking, "Hang on, I thought we were supposed to keep HTML, CSS, and JavaScript in different files." And you'd be right. Separation of concerns is a key part of writing well organized code. But let's talk about what that actually means in modern web development and how Vue approaches it. That way of separating file types made a lot of sense when websites were simpler. But as apps have gotten bigger and more dynamic, those language-based files don't always help anymore. In fact, they can get in the way. Imagine this diagram with a ton more files. Imagine how many arrows there would be. This is what Vue states on their own documentation. Separation of concerns is not equal to the separation of file types. In large modern projects, splitting everything by language can actually create more confusion, not less. Vue takes a different approach. Instead of separating by language, it separates by purpose. The component itself is the concern. Each component does one thing. For example, a component renders, styles, and determines the interactivity of, let's say, a footer. And all the code it needs for that footer, the template, logic, and styles, is kept together. This makes your components easier to read, test, reuse, and update. So, while it might look like we're mixing things up, we're actually making our code easier to work with in the long run. We're shifting from separating by file type to separating by units of functionality in our components. And that mindset is a key part of building large maintainable view applications. In the next scrimm, we'll look at how to build layout components to house headers and footers, those familiar parts of a page that help give your app its overall shape. In the last scrim, we talked about how view components are all about functionality, not just file types. And now it's time to put that into action and have a look at layout components. Layout components or sometimes called structural components can be headers, footers, sidebars, etc. Essentially, the elements that give your app its structure and help shape the user's experience. They don't usually have much complex logic, but they play a big role in how everything fits together. If we have a look at a pretty standard HTML structure, we can already see the UI in logical pieces. There's a header, a main, and a footer, but that just handles the HTML. With view components, we can compartmentalize the logic, the styling, and the content for each of these parts. Our file could actually look more like this. Let's see it in action. Here we've got our super simple component from before. We can see in the template that there are three distinct layout sections. There's the header, the main, and the footer. And each of these can be abstracted away into its own component and make our app doview component super clean. Let me show you this using the header and then you can have a go at the main and footer sections. So, first I'm going to come over here to our source folder and create a new folder called components. And as the name suggests, this folder is going to hold a bunch of view components. Inside of it, I'm going to create a new file called header.view. The naming convention for a view component is a capitalized word view. And now we've got an empty header component file. Remember, we're using the single file component file format. So, we'll need to supply the three blocks of code for the script, template, and styles. So, first the script, making sure to include the setup keyword, and then the template. And finally, the styles, making sure to include the scoped keyword. Now, the scoped keyword is pretty self-explanatory. Everything that you see here in the styles block is scoped to only this specific component. This makes it a lot easier to target elements without having to specify a bunch of parents just to target one specific element. And now we've got that very familiar component skeleton. Get used to doing this. You'll be doing it a lot throughout this course. Now I'm going to pull out the relevant code to create a header component from our app.view file. First I'm going to pull over any relevant JavaScript. The header element down here uses this emoji variable. So I'm going to grab that. Come back here to header.view and I'm going to paste it in the header. script section. And since we're using this ref function, we have to make sure to import it. So import ref from view. Now we're going to grab what goes inside of the template section, which is the HTML. So back in app.view, we're going to grab the header in its entirety, and we'll bring it back here to header.view and pop it inside of the template tags. And finally, the styles. Back in app.view1. view. Once again, we're going to come here to the style section and we're going to grab the relevant styles for header, which is just this one. And again, we'll come back to header view and we'll pop it in its style section. I'm going to give header.view a save and then come back to app.view and save this one as well. The header content has now disappeared from the preview. And that's to be expected because there's no more header related code in app.view. We now need to import the header component and use it. The import statement is pretty straightforward. import header from at components header doview. This first header refers to the name of the component. Earlier we named the file header.view. Not only does this name the file, but it also names the component. So be sure to follow naming conventions. And don't worry too much about this at yet. We'll talk about it in the next scrim. So, now that we've imported the header component, we can use it. Down here in the template section where we took out the header content, let's pop in header with a capital H and then a self-closing tag. And now when we save, we can see that the header has reappeared in the preview. Now that I've done the header component, it's your turn to give it a go with the main and footer elements of the template. You'll just have to follow the same formula that I did, which I've laid out in five steps down here. So your challenge is to separate the main and footer elements into the main and footer components and use them in app.view. Remember that you can always refer to what I did with header as well. Here's how I went about turning the main and footer elements into components. So first in the components folder, I'll create both files. So main doview as well as footer.view. And while I've got footer.view view open. I'm going to type out this single file component skeleton, which I'll speed up for your sake. And now that I've typed it once, I'm going to copy it and paste it in main.view as well. And since I've got main view open, let's work on that first. Back in app.view, I'm going to grab the main HTML and bring it over here to main.view's template section. And then I'll do the same with the script section. Main.view uses the name variable. So I'll head over to app.view view and I'll grab the name variable and bring it back to main.view's script section. And since we have to use ref, we'll make sure to import it. import ref from view. And then we'll fill out the style section. So back in app.view, we'll come down to the style section and find the two rules relevant to main. We'll grab those and we'll come back to main.view and we'll pop it in its style section. Now that main view is done, let's head to footer.view. I'm going to grab the HTML first. So, back in app.view, I'm going to grab the footer section and bring it into footer. Template section and then do the same with the script section. And we know that footer.view uses this copyright year variable. So, back in app.view, we'll come up and we'll find the copyright year variable, grab it, and bring it over into the script section. And since we're using ref, we'll make sure to import it. Import ref from view. And finally, the styles. Back in app.view, we'll come down and I'll grab the last CSS rule, which is for the footer and bring it over to footer.views style section. And now both the main and footer components are ready. So back in app.view, I'm first going to clean up. Now that I've given this a save, we can see that we only have the header and the preview. So let's import and use our remaining components. Import main from at components main.view view and import footer from at components footer.view. And then to use it, we'll do the same as header. So main and footer. And since we're not using ref anymore in this script section, we can get rid of the import statement. And now when we save, everything is back to normal here in the browser preview. And there we have it. A clear app.view component and three child components, header, main, and footer. Each doing their own job. If we have a look at header.view, you'll see that it's doing exactly what it's supposed to. It's defining what the header of the app looks like, says, and does. Like I said before, the component itself is the concern. Everything the app needs for the header component is right here. So, what about app doview? Well, app.view has a single purpose, too, and that's to bring together all the pieces. It's the top level component that lays out the structure of the page by pulling in its child components. And just like that, we've got a clean and organized layout built entirely from focused and purposeful components. In the next scrim, we're going to take a step back from components and look at that at character that we used when importing our child components. What is that? We'll find out in the next scrim. We saw in the last scrim that we used import statements to pull in the header, main, and footer components into the app component. We use this at character as part of the file path, which is something you may not have seen before. You're probably more familiar with using something like this instead. This dot slash is a path indicator that you're likely very familiar with. It means start from the current directory and then traverse from there. So, technically, we can actually use the dot here in our import statements instead of at. In fact, let's do that. And then I'm going to run the app and we'll check it out. We can see that it absolutely still works and that's because app.view sits in the source directory and we can navigate from here into components pretty easily. This works very well right now, but one day you're going to have a very complicated app. So relative traversing won't be much help then. So I'd like to introduce you to the at alias that's given to us by Vit, which as you might remember is the build tool that is utilized by create vit. Let's come on down here to vit. doconfig.js, JS which we had a quick look at in the last section. This file essentially tells V how to work with our view project. There's quite a few things happening here, but we're just going to have a look at these three lines. This part of the code sets up an alias or a shortcut for our project. Specifically, it tells Vit whenever you see this at symbol in the code, replace it with the absolute file path to the source folder. This at is the alias. This new URL section creates a URL to the source folder of our project and this file URL to path converts that URL into a file path. So in a nutshell, the at alias takes us back to the source folder from wherever we are at and then we can traverse from there. So back in the app doview, let's do a tiny teeny challenge for you to get used to the at character. Use the at alias to import all components. Super simple and you'll probably do this in a matter of seconds. So, go for it. Let's amend all of these relative file paths so they use the at alias instead. First one, second one, and the third one. And when we save, nothing has changed. So, while it does do the exact same thing for us right now, the at alias will come into play later on when we're linking and importing assets. So, now that we've learned a bit about components, how they're structured, and how they fit together, let's apply some of our newfound knowledge to a guided challenge. We'll start that in the next scrim. I'll see you there. Welcome to part one of a guided challenge. Here, I'll walk you through the idea of view components in a more real world setting, helping you get comfortable with using a new concept in context. Think of it as a mix between a tutorial and a challenge. By the end of this guided challenge, which is actually next scrim, you'll be all set for your first go at the section project, our viewfax app. We start off with a completely empty project. Well, almost empty. Your first challenge, which is here in challenge.md, is to spin up a new view project using the create view tool. See if you can remember how to spin up a new view project. All right, let's spin up a new view project using the create view tool. Down here in the terminal, let's type mpm create view at latest. I will install create view. Yes. And for the project name, we wanted to scaffold to this directory. So I'll just put a dot. Let's remove the existing files with yes. Our package name will be view project. And we will skip any and all additional features. And done. Now there are a few tweaks for us to do in order to make life easier for us, especially at this point in our learning journey. So first over here in vit.config, config. We're going to remove any references to view dev tools here and here. We won't be needing that for a while and it might actually get in the way. Up here in the source folder, we're going to delete the components folder. We'll be creating our own anyway. In the assets folder, we're going to delete base.css as well as the SVG. And inside of main.css, we're going to cut everything because we have our own CSS. Then over to app.view, we'll delete all the content inside of our three blocks. And now we've got a very basic view app ready for us to populate. And we'll get ready for that by installing it and running it. But what are we populating this app with? For this challenge, we're going to be turning a plain HTML and CSS mockup into a view app. I have just uploaded this new folder called OG mockup. Inside of it, you'll find index.html and styles.css, as well as a picture of the mockup. The mockup is pretty simple and it doesn't work as expected yet. As a Vue developer, you'll often be given HTML and CSS mockups in order to turn into a Vue app so it can be given the required functionality. So, our job right now is to bring over the relevant code into the Vue app and split things into structural components. To help us out, I've already decided how we're going to split this UI structurally. The header up here, the main in the middle, and the footer at the bottom. If we have a look at the index.html, HTML file, we can already see that the body is split up this way. The header, the main, and the footer. And if you have a look at the mockup's CSS file, we can already see that this is also split up into those functional components. The header CSS, the main CSS, and all the way down here, the footer CSS. There is also this base CSS section up the top, which we'll talk about in a second. Okay, it's time to give it a go. Your next challenge should feel familiar to the last challenge you had, except you have to grab code from the mockup rather than app.view. So over here in app.view, I'm going to pop your challenge up here in this script section. Create, populate, import, and use the header component in app.view. Make sure you grab the relevant HTML and CSS from this mockup folder. This is how I went about it. First in the source folder I created the components folder and inside of it I created header view. Then of course I provided the single file component structure of script template and style. And I will speed through this one for your sake. Now it's time to grab code from our provided mockup. So first in the mockups index.html I grabbed the header and I popped it over here in header.views template section. Then I headed over to the mockups style.css the CSS and I grabbed the header styles and then of course popped it over here in the header style section. Now that I have that, I headed over to app.view to import the header with import header from components header doview. And then I used it in the template with header and then a closing tag. And now when I save, you might not actually be able to see it, but the words quote generator is here in the preview. It's just very, very light. And that's because a lot of the core CSS is missing because we haven't set the core CSS yet. But this scrim is getting a little bit long. So we'll handle that as well as our remaining components in the next scrim. In the last scrim part one of this challenge, we handled the header component. Now even though we have the header handled, we can't actually really see the header at all. And that's because we haven't handled the b