The Ultimate Checklist: What to Do After Creating a Vue Project

So you just ran npm create vue@latest. The terminal tells you "Done. Now run: npm install and npm run dev." But wait! Before you start writing your first component, there are a few essential steps you should take to ensure your project is set up for success.

1. Clean Up the Boilerplate Code

The default Vue template comes with several placeholder files (like the Vue logo and "HelloWorld" components). While these are great for learning, they will just get in your way. Start by deleting the placeholder components in the src/components/ folder, removing the default styling in src/assets/base.css, and clearing out App.vue to start fresh.

2. Setup ESLint and Prettier

If you didn't select them during the setup, you need to add ESLint (for finding errors) and Prettier (for formatting code). These tools ensure your code looks clean and follows community standards. Configure your editor (like VS Code) to "Format on Save" so you never have to worry about spacing or indentation again.

3. Configure Environment Variables

Never hardcode your API URLs or secret keys into your Vue components! Create a .env file in the root of your project. In Vue (specifically Vite, which powers Vue 3), environment variables must start with VITE_. For example: VITE_API_URL=https://api.mywebsite.com. You can then access this in your code using import.meta.env.VITE_API_URL.

4. Create the Base Folder Structure

Create the folders you know you will need. Even if they are empty right now, having folders for components/, views/, services/, stores/, and composables/ will save you from having a disorganized project later.

5. Setup Vue Router Properly

If your app will have more than one page, make sure Vue Router is configured. Inside src/router/index.js, ensure you are using history mode (so your URLs don't have a '#' symbol). Also, set up a default "Not Found" (404) route to catch users who type a bad URL.

6. Install a CSS Framework

Writing custom CSS for an entire application takes a long time. Install a utility-first framework like Tailwind CSS. It takes 5 minutes to set up and will save you countless hours of writing media queries and custom classes.

7. Do Your First Git Commit

Now that your project is perfectly clean and configured, it is time to save your work. Run git init, add your files, and commit them with a message like "Initial project setup". This gives you a safe starting point to return to if you ever make a mistake.