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?

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

Solution 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

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

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

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

View more solutions

Comments

[Jeff]

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)

[connexo]

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

[PrestonDocks]

@Jeff are you a politician, if not you should be. You just repeated the Ops question, but managed to make it look like an answer. LOL.

[Tim Wickstrom]

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

[Simon Thiel]

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

[Istiaque Ahmed]

@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 : stackoverflow.com/questions/59245577/… ? Particularly take a look at the EDIT: section of the OP

[Aayush]

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?