Project 1 - HowMuchIsThisMeetingCosting - Project Bootstrap

 

I am on a journey to build a side hustle business, and I am building web projects to 'level up' my skills.

In this post  I'll walk through how I set up my first 'front-end' only project.  This will be a simple article because most of the work is taken care of my choice of tech stack - see the previous post for details 

Vuetify Project Setup Process

The setup process I used is as follows:

• Install Pre-requisites
• Setup and clone a new git repository
• Run the Vuetify bootstrap project

Install pre-requisites

For this project, I needed the following pre-requisites

•   node/npm,
•   visual studio code,
•   git for windows

Setup and clone a new git repository

This is standard git stuff, but it is important to add  a .gitignore file for Node/JavaScript projects when setting up the repo to ensure that local node_modules are not checked in. Here is an example:  https://github.com/github/gitignore/blob/main/Node.gitignore

Run the Vuetify bootstrap project

I followed the Vuetify setup guidance for vite and npm here: https://vuetifyjs.com/en/getting-started/installation/#installation

(I choose the option to install everything, including the store and router plugins)

Start Coding

Open VSCode and start coding. Good Luck!

Vuetify bootstrap project plugins

All in all, the Vuetify bootstrap project with Vite works well, but it is worth knowing that the setup project is opinionated and makes some configuration choices that you need to be aware of. Especially if like me you are learning Vue as you go.  In particular the bootstrap project installs a number of Vue plugins that are generally beneficial but which can trip you up if you aren't aware of them and try to debug issues using the 'vanilla' Vue way of doing things,  

The plugins that I think you you need to be most aware of are:

• unplugin vuerouter
• unplugin vue component
• unplugin autoimport

Unplugin Vue Router

The unplugin (unified plugin) vue router extends the default routing behaviour of Vue by automatically generating routes based on the file structure of your project.  This is an opinionated system that can be confusing to debug if you don't understand it. I strongly recommend reading through the File Based Routing section of the plugin documentation if you enable the routing option in the bootstrap project:

(note, one side effect of this plugin seems to be that new routes are sometimes not detected by Vite's hot module replacement. If you are getting weird routing errors it is worth restarting vite to see if that fixes them)

Unplugin Vue Components

The unplugin vue components plugin adds automatic import statements for all vue components in the /components folder. This means that components that are created in this folder do not need to be explicitly imported to be used.

Unplugin AutoImport

Similarly, the autoimport plugin is a convenience plugin that ensures that it isn't necessary to explicitly import vue api references into your components.  The import statements are pre-generated and added at compile time.

Vite configuration

The main configuration file for this project is vite.config.mts file in the root folder. It is worth researching and understanding  each of the plugins that are configured here, especially if you start seeing issues that don't align with the base Vue documentation.

Documentation Links

Here is a list of documentation links that I found useful for this project: 

• Vue JS Documentation
• Vuetify Documentation
• Vite Documentation
• Unplugin Vue Router Plugin Documentation
• Unplugin Vue Components Plugin Documentation
• Unplugin Vue Auto Imports Plugin Documentation
• Visual Studio Code Keyboard Shortcuts For Windows