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

Question

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?

Joyjoya

I don't think they are different in the sense that they are both single-file view components. But your page views (Home.vue, About.vue, Checkout.vue) can be kept separate from your components (Button.vue, LoadingSpinner.vue, etc) – Mcnulty

This shines some light on the differences in structure: blog.pusher.com/new-vue-cli-simplifies-development – Headset

@PrestonDocks I think his answer was illuminating in his example use cases. He stated views are pages (Home, About, Checkout) and components are smaller elements of a page (Button, LoadingSpinner etc.). I think it answers the question. – Utas

Answer 1

First of all, both folders, src/components and src/views, contain Vue components.

The key difference is that some Vue components act as Views for routing.

When dealing with routing in Vue, usually with Vue Router, routes are defined in order to switch the current view used in the <router-view> component. These routes are typically located at src/router/routes.js, where we can see something like this:

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
]

The components located under src/components are less likely to be used in a route whereas components located under src/views will be used by at least one route.

---

Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.

Vue CLI aims for rapid Vue.js development, it keeps things simple and offers flexibility. Its goal is to enable teams of varying skill levels to set up a new project and get started.

At the end of the day, it is a matter of convenience and application structure.

• Some people like to have their Views folder under src/router like this enterprise boilerplate.
• Some people call it Pages instead of Views.
• Some people have all their components under the same folder.

---

Choose the application structure that best suits the project you are working on.

Lilylilyan

This is 100% right. You can structure your app any way that makes sense to you. I personally use "src/pages" for all routes. In that folder, I will create sub-folder for each "area" of the site. Example "src/pages/questions" and in that folder, I will have an index.vue which will have the list of questions. I will have an add.vue that will be the page for adding questions, etc. These "pages" typically simply assemble the needed components to make up the "page". In my "src/components" folder I will create subfolders for things like navigation, form elements, custom shared components, etc... – Askance

I assume components such as Popup / Modal windows go to src/components by this convention? – Apiculate

@Ricky, May i ask you to have a look at a Vue.JS question related with the source code in github of the book 'Full-Stack Vue.js 2 and Laravel 5' by Anthone Gore here : #59246077 ? Particularly take a look at the EDIT: section of the OP – Featherweight

Can we say that the components inside views are a collection of components? For example, my list view can have multiple components and these components are housed/wrapped inside a single component in view? – Extender

Views are also smart components(container components) that orchestrate child components work in tandem. Views pass data via props to children, listen to events, change state via fetching and so on. – Hessenassau

Answer 2

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

Openhanded

Answer 3

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.

Supervisor

Answer 4

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.

Tufa

Answer 5

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)

Sportswear

Answer 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)

Auricular

Answer 7

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

Kate

Answer 8

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

Wallin

Answer 9

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.

Turntable

Answer 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.

Flophouse

Answer 11

Views are basically concerned with those components that represent their self by there own and they are basically unique. like, the register page. login page etc If we talk about the components then they are called somewhere we need them like reusable components of an alert we can use mixin too but for example a pop-up component in which we place our data and use it on multiple sides.

Depth knowledge in them:

1. Views: The views folder typically contains the high-level views or pages of your application. Views represent the different screens or routes that users can navigate to. These views are usually associated with specific routes and may contain multiple components. Views are responsible for orchestrating the components and managing the state and behavior of the overall page.

2. Components: The components folder, on the other hand, contains reusable and self-contained UI components. Components are modular pieces of the user interface that can be used across multiple views or pages. They encapsulate a specific functionality or visual element and can have their own state and behavior. Components are often used within views to build complex interfaces by combining and composing smaller, reusable components.

Summary: To summarize, the main difference is that views represent the high-level screens or pages of your application, while components are smaller, reusable UI elements that can be used within views or even within other components. Separating views from components helps in maintaining a clean and organized project structure and promotes reusability and modularity.

Behavior: When you create a project using the Vue CLI, the default project structure is generated to provide a recommended and organized setup for your Vue.js application. The inclusion of the views and components folders in the default project structure is based on common development patterns and best practices in Vue.js application development.

The default project structure aims to promote a clear separation of concerns and modular development. Here's a brief explanation of why these folders are included:

Views.

Components.

By following this project structure, you can create a scalable and maintainable Vue.js application, as it encourages code reusability, modularity, and separation of concerns. However, you are free to customize and adapt the project structure based on your specific project requirements. The Vue CLI provides flexibility and configurability, allowing you to modify the project structure as needed.

Stanwood

Answer 12

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.

Padrone

Answer 13

Nothing but to arrange the project in logical order. You can still create components in the view folder, but it's a better approach to separate items so that the code is less messy.

Ng

Answer 14

The difference is the function they perform. The views are used to represent your pages properly, that you can navigate back and forth, and the components are the parts that compose your page

Cithara

Answer 15

Usually the Components are imported to View. And the View is placed to the router-view if you wish to.

Melissamelisse

Answer 16

The views folder usually contains Vue components that represent entire pages or views in your application. These components often encapsulate the layout and structure of a specific route or page. Views are typically used in your router configuration to define the structure of different pages in your application. Views can include and use various components from the components folder. Example: If you have a blog application, you might have a views folder with components like Home.Vue, BlogPost.vue, and About.vue, each representing a different page of your application. Also the views can be used for differentiate between admin side, client side etc sample:

src/
views/
Home.vue
BlogPost.vue
About.vue

src/
views/
ADMIN
USER
GUEST

The components folder usually contains smaller, reusable Vue components. These components can be used across different views or even within other components. Components are meant to encapsulate specific pieces of functionality or UI that can be reused in different parts of your application. Example: If your blog application has a comment section that can be used in different views, you might create a Comments.vue component in the components folder. sample:

src/
components/
Comments.vue

Stanwood