A Webpack Vue Application

Vue projects are structured similarly to a lot of modern node-based apps that contain a package.json file and a node_modules folder in the root of your project. Various other configuration files are usually contained at the root level, such as babel.config.js and .eslintrc.js, since they will generally have an effect across your whole project. The following screenshot displays a default Vue app folder structure:

Figure 1.1: Default Vue application folder structure

The Vue project structure follows a pattern where most of your source code is managed within the /src directory. You can subdivide your Vue files into various folders, for example, using a components folder to store reusable Vue components. By default, Vue will create assets and a components folder to code split the default files. For beginners, it is good to follow this pattern until you get more comfortable with splitting up your code in ways that make sense for your application:

Figure 1.2: Default Vue application src folder structure

The public folder is a special directory for containing files that need to be transferred directly to the output location. The following screenshot displays how this folder will look:

Figure 1.3: Default Vue application public folder

By default, the public folder will contain an index.html file that serves as a placeholder for loading the Vue application. The index.html file can be modified to include header and footer scripts as required, such as Google Fonts or third-party JavaScript libraries that are not included as a part of your webpack bundle.

Vue Single-Page Components

Components are the building blocks of most modern frameworks. Generally splitting your work into smaller chunks not only makes your code much easier to interpret but functionally follows the principles of Don't Repeat Yourself (DRY). One of the most unique patterns for Vue users with arguably one of the most benefits is the Single File Component (SFC) pattern. SFCs centralize the responsibility of both appearance and behavior into a single file, often simplifying the architecture of your project and making the development process simpler being able to refer to your HTML, CSS, and JavaScript logic without switching files. Your default .vue file structure will be as follows:

Figure 1.4: Default .vue file structure

A trap that a lot of new Vue developers fall into is writing mega Vue files of over 500 lines of code, just for the HTML itself. Usually, what this means is that you could break this long component down into some smaller ones; however, we will cover file importing and code splitting in future chapters.

For example, in the header of your application, you may have a reusable logo element that needs to remain consistent on other pages. You would create a component such as logo.vue:

// logo.vue
<template>
      <img src="myLogo.png" />
</template>

You can import it into your header component named header.vue:

// header.vue
     
<template>
    <header>
      <a href="mywebsite.com"><logo /></a>
    </header>
</template>
     
<script>
    import logo from 'components/logo.vue'
    export default {
        components: {
          logo
        }
    }
</script>

Very soon, you will have lots of these semantically structured files, which use these small chunks of reusable syntax that your team can implement across various areas of your application.

In the next section, we will gain an understanding of data properties.