Src Directory

The api folder

First, we have the api folder, which has the API layer of our application. It has methods that are responsible for making API calls and communicating with a server.

The assets folder

The assets folder contains fonts and images. In fonts, we can keep any custom fonts and typefaces. In images, we can store any pictures used throughout the application.

The components directory

The initial directories are base, common, and transitions. The base directory accommodates the most reusable components used in an application, buttons, form inputs, and so on. Base components are dynamically loaded and registered, so we don’t have to manually import them everywhere.

The common directory also contains reusable components, but these components aren’t registered automatically. For example, a modal component. Common components would be used in a few places, but not as often as base components.

Finally, the transitions directory holds any reusable components that utilize Vue’s <transition /> component.

The composables directory

We put any global functions that utilize Vue’s Composition API in this directory.

The layout directory

As the name suggests, the layout directory should have components that provide different layouts for our pages. For example, building a dashboard application could render different layouts depending on whether a user is logged in.

The config directory

We can put any runtime config files in the config directory for our application and third-party services. For instance, if we use a service like Firebase or OIDC for authentication, we need to add configuration files and use them in our app. Just make sure to not confuse configuration with environmental variables, as anything that goes here is present in the build bundle.

The constants directory

Here, we can put any constant variables that are used throughout the application. It’s a good practice to capitalize our constants to distinguish them from other variables and localized constants in our app. Below are some examples of defining and using constants. The example is given below defines constants separately.