Project Setup

Begin by creating a new Vue 3 project using Vite. Navigate to your desired directory and execute:

npm init vite@latest my-app -- --template vue

When prompted for options, select JavaScript as the variant. After scaffolding completes, proceed with dependency installation:

cd my-app
npm install

To optimize package installation speed, configure a faster registry if needed:

npm config set registry https://registry.npmmirror.com/

Launch the development server with:

npm run dev

Access the application at http://localhost:5173/.

Integrating Element Plus

Install the Element Plus component library:

npm install element-plus

Register it globally within src/main.js:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const application = createApp(App)
application.use(ElementPlus)
application.mount('#app')

Adding Vue Router

Install Vue Router version 4:

npm install vue-router@4

Create a routing configuration file at src/router.js:

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '../views/Dashboard.vue'

const history = createWebHistory()

const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  }
]

const routerInstance = createRouter({
  history,
  routes
})

export default routerInstance

Update src/main.js to incorporate routing:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import routerInstance from './router.js'

const application = createApp(App)
application.use(ElementPlus)
application.use(routerInstance)
application.mount('#app')

Environment Variables

Store configuration values in environment files prefixed with VITE_. For example:

VITE_API_ENDPOINT=https://api.example.com
VITE_APP_VERSION=1.0.0

Reference these variables in your code:

const apiEndpoint = import.meta.env.VITE_API_ENDPOINT
const appVersion = import.meta.env.VITE_APP_VERSION

API Integration Example

Implement service communication with async functions:

async function establishConnection() {
  const connectionState = reactive({
    isLoading: true,
    sessionToken: null,
    errorMessage: null
  })

  const endpoint = '/api/connect/'
  
  const requestHeaders = {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }

  const payload = {
    action: 'init',
    data: {
      protocol: '2025-03-26',
      features: {},
      clientMetadata: {
        identifier: 'Studio Client',
        revision: '1.4.9'
      }
    },
    version: '2.0',
    sequence: 1
  }

  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: requestHeaders,
      body: JSON.stringify(payload)
    })

    if (!response.ok) {
      throw new Error(`Request failed with status ${response.status}`)
    }

    const token = response.headers.get('session-token')
    if (token) {
      connectionState.sessionToken = token
      // Additional operations with token
    } else {
      connectionState.errorMessage = 'Missing session token'
    }
  } catch (exception) {
    connectionState.errorMessage = `Connection error: ${exception.message}`
    console.error('Service connection failed:', exception)
  } finally {
    connectionState.isLoading = false
  }
}

Vite Configuration

Customize build settings in vite.config.js:

import { defineConfig } from 'vite'
import vuePlugin from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vuePlugin()],
  base: '/application/',
  build: {
    outDir: 'build',
    assetsDir: 'resources',
    sourcemap: false,
    manifest: true,
    rollupOptions: {
      output: {
        chunkFileNames: 'resources/[name]-[hash].js',
        entryFileNames: 'resources/[name]-[hash].js',
        assetFileNames: 'resources/[name]-[hash].[ext]'
      }
    }
  }
})