'What is the difference between the views and components folders in a Vue project?

I just used the command line (CLI) to initialize a Vue.js project. The CLI created a src/components and src/views folder.

It has been a few months since I have worked with a Vue project and the folder structure seems new to me.

What is the difference between the views and components folders in a Vue project generated with vue-cli?

vue.jsvuejs2vue-clivue-cli-3vue-cli-4


Solution 1:[1]

I think its more of a convention. Something that is reusable can be kept in src/components folder something that is tied to router can be kept in src/views

Solution 2:[2]

Generally re-usable views are suggested to be placed in src/components directory. Examples like Header, Footer, Ads, Grids or any custom controls likes styled text boxes or buttons. One or more components can be accessed inside a view.

A View can have component(s) and a view is actually intended to be accessed by navigation url. They are generally placed in src/views.

Remember that you are not constrained to access the Components via url. You are free to add any component to the router.js and access it too. But if you are intended to do it so, you can move it to a src/views rather than placing it in src/components.

Components are user-controls in analogy to asp.net web forms.

Its just about structuring your code for better maintenance and readability.

Solution 3:[3]

Both folders are basically the same since they both hold components, but the aesthetic of Vue is that components that will function as pages (routed to like page for navigation) are kept in the /views folder, while reusable components like form fields are kept in the /components folder.

Solution 4:[4]

src/views is typically used for your main pages in the application that you navigate via router. src/components is used for the reusable components that you use inside your main pages (multiple times inside the same page or across different pages)

Solution 5:[5]

Simple, Views are for routes while Components are components of the route.

Solution 6:[6]

You can consider Views like page and components are reusable block of code that you can use in any page or components (both are Vue files these terms are just for demonstration)

Solution 7:[7]

Less dynamic close to static pages is reffered to views and more reuseable and dynamic content is placed under the components.

Solution 8:[8]

It is quite simple, as mentioned by others: you usually use Views for the actual pages you want the user to navigate. Components are the elements inside those pages that you can reuse in any page of your project.

Solution 9:[9]

Both these folders hold Vue components, 'views' folder is supposed to contain root level components where other components would be imported. The so called 'other components' reside inside the 'components' folder. Let's take an example for illustration.

Suppose you have 3 root level pages for a website yourname.com

  • yourname.com
  • yourname.com/about
  • yourname.com/price

Your 'views' folder would have 3 components. 'about.vue', 'index.vue' and 'price.vue'. These files would be imported in your router file or could be directly imported in app.vue file for routing. These views could have multiple components inside them like 'price-card.vue', 'contact-card.vue' and more. These files would typically reside inside a folder named 'components'. You can import these components inside the vue files you have in the 'views' folder and then render them.

Solution 10:[10]

In my view, component folder must contain the components that are going to be used in the views. And in views, there must be those pages that are to be accessed by the router. For example, you have a navbar, header and a footer in your pages to be used and you have a login page, signup page and a main page. Then your src/components must contain header, footer and navbar. And in your src/views there must be files like login, signup and main file.

Related Questions