In this video you will learn the file structure in Vue project which was generated by Vue cli and how Vue application is working

So in previous video we generated the project using Vue Cli. If you didn't see that video I will link it down in the description box below.

So everything is started in public index.html where Webpack injected at the end all scripts which we generated with Vue. The important part here is div tag inside which our project will be rendered.

Now let's check src/main.js. It's the starting point of our javascript. Here you can see

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

With this code we are starting Vue application. Just a small hint here if you generated project with Vue 3 or you are watching this video when Vue CLI supports only Vue 3 that instead of new Vue you have here createApp function. But the purpose is exactly the same.

As you can see the first thing that we are rendering in Vue is App component. And we will talk about components more in the next videos. For now let's jump in src/App.vue

As you can see we have vue extension here and this is special Vue syntax file where we will write html, css and js directly in this one file.

As you can see we don't have any code here it's simply 1 tag inside template section. Actually Vue is planned to work with frontend routes as a single page application. Which means depending on the URL Vue will render different content for us. Let's check where Vue registered some routes for us.

As you saw in main.js we have router parameter when we initialized Vue. Let's just in router file. As you can see here we define our routes. So actually we are writing what component we render on what page. For example we render component Home on our / page. Then at the bottom we have new VueRouter call where we are passing our routes. And just to remind you if you are using Vue 3 here will be createRouter function but the logic is completely the same.

But here is the question: We are on home page but we see only our 1 tag and home page is not rendered as it should by routes. It happens because we removed everything from App.vue component. And there was 1 important line. Here we need to write in give our router possibility to render our content.

<template>
  <div>
    <h1>Vue for beginners</h1>
    <router-view />
  </div>
</template>

And it's also important that in Vue templates we have only 1 element as our root element so we need to wrap our elements in div.

As you can see a lot of content is rendered now on the page. But now we now that what will be rendered on / is defined in routes/index.js
It's a file inside views directory.

So what we write in Home component is related to specific page of the project. Here you can see the same template where we are writing our code but also a script part. This is how we normally define our component. We are exporting the object with property name and some other properties which are related to the component.

So this is how Vue is working. We are starting in main.js and we initialize Vue with router parameter there. Then our first component which is rendered is App.vue. Inside router we define what component we need to render on this specific page. All our components which we render on routes are living in src/views folder.

The important part here was to render component inside App.vue. In other case we won't see any content from specific page.

In this video you learned what files Vue cli generated for us and how Vue project is being started.

If "Vue for beginners" is too easy for you go check my advanced course about Vue which is going 10 course and where we are creating together the application from empty folder to fully finished application.