Documentation / Development Setup

Development Setup

Configure your development environment for optimal productivity with Bimble Chat Vue

Prerequisites

Before setting up your development environment, ensure you have the following tools installed:

Node.js

Version 16.0 or higher required

Download
Package Manager

npm, yarn, or pnpm

Included with Node.js
Git

Version control system

Download
Code Editor

VS Code recommended

Download
Version Check

Verify your installations by running these commands in your terminal:

node --version    # Should be v16.0.0 or higher
npm --version     # Should be 8.0.0 or higher
git --version     # Any recent version

IDE Setup & Configuration

Configure your development environment with the recommended IDE and extensions:

1
Visual Studio Code Setup

VS Code is the recommended IDE for Vue.js development. Download and install it:

# Download from https://code.visualstudio.com
# Or install via package manager (macOS)
brew install --cask visual-studio-code

# Or install via package manager (Ubuntu)
sudo snap install code --classic
2
Essential VS Code Extensions

Install these essential extensions for Vue.js development:

Vue - Official

Vue.js language support

Vue.volar
TypeScript Vue Plugin

TypeScript support for Vue

Vue.vscode-typescript-vue-plugin
SCSS Formatter

SCSS/Sass language support

sibiraj-s.vscode-scss-formatter
Auto Rename Tag

Automatically rename paired HTML tags

formulahendry.auto-rename-tag
ES7+ React/Redux/Vue Snippets

Code snippets for faster development

dsznajder.es7-react-js-snippets
ESLint

Code linting and formatting

dbaeumer.vscode-eslint 
# Install extensions via command line
code --install-extension Vue.volar
code --install-extension Vue.vscode-typescript-vue-plugin
code --install-extension sibiraj-s.vscode-scss-formatter
code --install-extension formulahendry.auto-rename-tag
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension dbaeumer.vscode-eslint
3
VS Code Settings Configuration

Create or update your VS Code settings for optimal Vue development:

// .vscode/settings.json
{
  "typescript.preferences.quoteStyle": "single",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "Vue.volar",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[typescript]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
  },
  "emmet.includeLanguages": {
    "vue": "html"
  },
  "vue.updateImportsOnFileMove.enabled": true
}

Project Setup

Set up your local development environment:

1
Navigate to Project Directory

After extracting the downloaded template files, navigate to the project directory:

# Navigate to project directory
cd bimble-chat-vue
2
Install Dependencies

Install all required dependencies using your preferred package manager:

npm install
yarn install
pnpm install
3
Start Development Server

Start the development server with hot-reload:

npm run dev
yarn dev
pnpm dev

The application will be available at http://localhost:5173

Browser DevTools Setup

Install essential browser extensions for Vue.js development:

Vue.js DevTools

Essential debugging tool for Vue applications

Chrome Firefox
Pinia DevTools

State management debugging (included in Vue DevTools)

Built-in
DevTools Features
  • Component tree inspection
  • Props and state debugging
  • Event tracking
  • Performance profiling
  • Pinia store state management

Development Workflow

Follow these best practices for efficient development:

Project Structure Navigation

Key directories to familiarize yourself with:

src/
├── components/       # Reusable Vue components
├── views/           # Page-level components
├── stores/          # Pinia state management
├── router/          # Vue Router configuration
├── plugins/         # Vue plugins (Vuetify, etc.)
├── utils/           # Utility functions
├── assets/          # Static assets
└── scss/            # Global styles
Hot Module Replacement (HMR)

Vite provides fast HMR for instant development feedback:

  • Vue components reload instantly
  • CSS changes apply without page refresh
  • State is preserved during updates
  • TypeScript compilation is lightning fast
Component Development Tips
<!-- Use Composition API with <script setup> -->
<script setup lang="ts">
import { ref, computed } from 'vue'

// Reactive state
const count = ref(0)

// Computed properties
const doubleCount = computed(() => count.value * 2)

// Methods
const increment = () => {
  count.value++
}
</script>

<template>
  <v-btn @click="increment">
    Count: {{ count }} (Double: {{ doubleCount }})
  </v-btn>
</template>

Environment Configuration

Configure environment variables and settings:

1
Environment Variables

Create environment-specific configuration files:

# .env.local (for local development)
VITE_APP_TITLE=Bimble Chat Vue
VITE_API_BASE_URL=http://localhost:3000/api
VITE_ENABLE_MOCK_API=true
2
Vite Configuration

The project uses a pre-configured vite.config.js:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vuetify from "vite-plugin-vuetify";

export default defineConfig({
  plugins: [
    vue(),
    vuetify({
      autoImport: true,
      styles: { configFile: "src/scss/variables.scss" }
    })
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
});

Debugging Setup

Configure debugging tools for efficient troubleshooting:

VS Code Debugging

Create a debug configuration for VS Code:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    }
  ]
}
Console Debugging

Use these debugging techniques in your components:

// Debug reactive state
import { watch } from 'vue'

watch(someReactiveValue, (newVal, oldVal) => {
  console.log('Value changed:', { oldVal, newVal })
})

// Debug computed properties
const debuggedComputed = computed(() => {
  const result = someExpensiveCalculation()
  console.log('Computed result:', result)
  return result
})

Performance Tips

Optimize your development experience:

Memory Usage

Keep dev server memory usage optimal

  • Restart dev server periodically
  • Close unused browser tabs
  • Use Vue DevTools efficiently
Build Speed

Vite optimizations for faster builds

  • Dependency pre-bundling
  • ES modules support
  • Efficient hot reload

Troubleshooting

Port Already in Use

Issue: Development server fails to start on port 5173.

Solution:

# Kill process using port 5173
lsof -ti:5173 | xargs kill -9

# Or use a different port
npm run dev -- --port 3000
Module Resolution Issues

Issue: Import errors or module not found.

Solution:

  • Clear node_modules and reinstall: rm -rf node_modules package-lock.json && npm install
  • Check import paths use @ alias correctly
  • Verify file extensions (.vue, .ts, .js)
Vue DevTools Not Working

Issue: Vue DevTools not detecting the application.

Solution:

  • Ensure you're running in development mode
  • Check browser extension is enabled
  • Refresh the page and DevTools

What's Next?

Now that your development environment is set up, explore these areas:

Quick Start Guide

Get your first application running in minutes
Project Structure

Understand the codebase organization
State Management

Learn about Pinia stores and state management