Creating Your First Vue 3 App with Vite - A Beginner's Tutorial

v is a tool from the creators of you that greatly improves a front end development experience its name comes from the french word for fast let's look at why we can start your development server in under 300 milliseconds perform hot module replacement which are updates you can make to your code at runtime and under 100. this speed in comparison to tools like webpack comes from the way that veen handles modules in webpack your entire application has to be bundled before your development server is ready in vit however your server is always available then when a request is made to your site let's say someone wants to view a page only the modules needed to render that page are parsed and resolved by the browser this approach gives vita performance advantage over tools like the view cli to create our first view project let's open up a terminal and then type the command npm init at write.js app you can also do this in yarn using yarn create we're prompted for name so let's call our project my veed project next we're asked for a template as you can see here even though veed is optimized specifically for vue you can use other frontend frameworks like react and performance benefits of veed will still work however for this tutorial we will be selecting the view template after we hit enter and create our project the command line prints out three commands so let's run them let's cd into our project run npm install and then run npm run dev our dev server starts up very quickly and prints out a local host url for our app so if we head over to localhost 3000 in our browser we'll see our very first veed app running this starter template contains a link to the documentation for both v and v3 and if we click this button the count will increment so let's take a look at some of this code and understand what's happening starting from the beginning our view app is created inside of main.js it only has three lines the first imports the create app method from vue's core library the second line imports our app.view component and the third line creates our view instance using createapp and app.view and mounts it inside of a div that has an id of app we can actually find this div inside of our index.html file so let's take a look at appdog view next if you're new to view this may look a little overwhelming but don't worry view gives us the ability to use what are called single file components and as you may guess this means that our entire component template script and styles are contained in just one file so inside the single dot view file there are three separate sections first the template section contains html based code that determines what is actually rendered to the screen next the script section contains our javascript logic we can import modules other components and handle the data and reactivity for our component finally the style section contains the css styles for our component app.view shows us a few other things about view 3. it shows us how to reference assets in this case the view logo from our source folder using relative paths since this component is app.view the relative path to the image is an asset logo.png and it also shows us how to import and render additional view components inside of our script section we import hello world from the components folder then inside of our template we can render it right here but what is this message attribute on our component first let's see what happens when we change the value of this message attribute to v project tutorial as soon as we save hot module replacement allows our browser to automatically update so we can see that the title under our logo changes to our new text to understand what's doing this we have to take a look at our helloworld.view component so so far we have our index.js file that creates our view app using our app.view component app.view includes hello world as one of its child components and this message attribute is being passed from app to hello world in view we call these custom attributes props and they're used to send data from a parent component to its children inside the scripts section of hello world we can see that we import something called define props this allows us to define and even validate props for our component in hello world we are passing in a prop called message and saying that it must be a string once we have a prop defined we can reference it inside of our template section in view we can bind data to our template using the mustache syntax which means surrounding our expressions with double curly braces here the mustache tag will be replaced with whatever the value of messages that's why when we change message the title changed on our web page and the last thing i want to look at is how this button is able to track a count variable and handle click events and this has to do with the reactive data which in view 3 works a lot differently than the options api in view 2. reactivity is a core concept in view in its most basic form reactivity means that when the data in our javascript model updates our dom will automatically reflect these changes in hello world the count variable is a great example of reactivity clicking the button will increment our state then when our state updates our application will automatically re-render with a new value there are two ways to create reactive data inside of view reactive and ref hello world uses reactive but later in this video we'll cover ref 2. reactive allows us to create an entire reactive object that can detect when any of its properties change inside the script section state is being set as a reactive object with a count property then when our button is clicked which is detected by this at click we can increment our account property so now that we understand how the basics of view work inside of our veed starter code let's try writing our own component for our component let's build a simple form with a name text field and a submit button to start off let's create a new file inside of our components folder and we'll call it myform.view we'll create our three separate sections one for our template one for our script and one for our styles let's start off with the template first we want to create a rapper div that will contain all our elements inside we'll create an input element of type text with a placeholder of name finally we'll create another div for our submit section and inside we'll place a button that says submit to actually render our form on our view app let's head over to app.view and where we imported hello world we can change the values to say my form so in the script section let's change this import and then in the template let's replace this line and just save my form so now if we look at the browser it doesn't look the prettiest but everything's here let's add a few styles to myform.view to make it look just a little bit better and to keep it simple all we're going to do is add some padding to our input and some margin to the top of our button now we can take a look at adding reactive data to our form in hello world we saw that script was declared as script setup and that's actually shorthand for what we're going to be doing in this component so first let's create our export default and then inside we'll place a setup method and this method runs when our setup is created and then to create our reactive data let's import ref from view so back inside setup let's create a constant name and we'll set it to a ref with the starting value of an empty string similar to reactive ref creates reactive data but instead of an object we can just pass a singular value to make our data available in our template it has to be returned by our setup method so at the end of setup let's return an object that contains name back inside our template let's print out name and then set up a v model on our input v model creates a two-way data binding this means that whenever our input changes name will change and if name changes somewhere else in our application our input will also change we can see this in action when we type inside of our input as we type the value of name changes and that's the power of reactivity and view okay let's work on submitting this form when our submit button is clicked we want to call a method called submit form we can capture this click by using v on colon click and then calling submit form however for shorthand it's most common that you'll see v on just replaced with an at symbol now we actually have to create the submit form method so inside our script and our setup method let's create a constant submit form and set it equal to a function inside we'll just print out that the form is submitted and the value of name and since name is a ref we have to call dot value in order to access the actual string value don't forget that since we want our template to have access to submit form it has to be returned from our setup method so now when we click our button we can see our console printing our log statement of course in real labs this would be connected to a database but in terms of view we have a lot of the functionality that we're looking for here so one quick feature we can add is to disable our submit button when there isn't a name and we can do this using vbind and html's disabled attribute for buttons vbind allows us to bind an html property to a javascript expression so inside our button tag let's type v bind colon disabled equals name.length equals equals zero and this means that whenever the length of our name is equal to zero our button can be clicked and once again a shorthand for v bind is simply to type colon so for this it would just be cold and disabled in our app we'll see that if our input is empty our button is disabled and we cannot submit our form however as soon as we type something we can click it again the final concept we're going to look at in this video is lifecycle hooks each view component has a life cycle that includes creation mounting to the dom updating data and unmounting from the dom view provides us hooks into these events so we can run code at certain times in a component's lifecycle bar form we're going to use the mounted lifecycle to automatically focus our text input and mounted is called after our components template has been added to the dom the first thing we have to do is import unmounted from view and then inside setup let's call on mounted and pass in a method that will run when the component is mounted so now we want to take our input and focus it but the problem is how do we access our input element well we can do this using template reps and template refs allow our script section of our view component to have access to the template elements so inside setup let's create a content l that's equal to a blank ref and don't forget to return it then inside template we'll go to our input element and add ref equals l so when our component is mounted v will automatically set the value of l to this element to check this let's create two log statements that print out the value of l one outside of on mounted and one inside so when we look at our app we'll see that before our component is mounted l is undefined then after it's mounted in our lifecycle hook is properly connected to the input element now that we have access to our element all that we have to do in on mounted is called ldog value which will give us the elements stored by ref and then call dot focus to focus our input when we reload our page our input is automatically focused when our page is loaded we can start typing without having to click our input or anything i'm going to go ahead and wrap things up there hopefully this quick introduction into v and the basic concepts of u3 taught you a little bit if this video helped you please like and subscribe and consider checking out learnview.com for more free tutorials and view development resources thanks for watching and i'll see you in the next view tutorial

Channel: LearnVue

Views: 18,049

Keywords: vuejs, web development

Id: JLt3GrDZDvQ

Length: 9min 6sec (546 seconds)

Published: Tue Jan 19 2021

Reddit Comments

[u/andricathere]

Never heard of Vite, but it looks promising

[u/but_how_do_i_go_fast]

Dude went whole "This is how you crawl and basically run `vue create hello-world`" to "Check out this full-marathon and all these lifecycle hooks, and all of these bindings, and all of these children!" in about 7 minutes :D

Personally, I was looking forward to a 'this is vite, and how we use vite vs. the traditional manner', but instead, it looks like I got another 'This is helloworld and vue, but with some weird setup() and ref that are not really needed at all'

I'm sure I am missing something from the video, but investing 10 minutes into it from what I saw, I am not sold on vite what-so-ever.