How to configure vite.config.js with a service.js file for local development ( vue & vuetify )

If you're building a Vue.js app with Vite and you need to access an API, you may run into CORS issues when trying to make requests from your local development environment. In this tutorial, we'll go over how to configure your file and create a file to store your API logic and create a local server to avoid these issues. vite.config.js service.js

Configuring vite.config.js

First, let's look at the file vite.config.js. This file is where we can configure Vite's settings and plugins. We'll use the vuetify plugin for our Vue.js app, which requires the vite-plugin-vuetify plugin as well. We'll also use the @vitejs/plugin-vue plugin to compile .vue files.

// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    vue({ 
      template: { transformAssetUrls }
    }),
    vuetify({
      autoImport: true,
    }),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.vue',
    ],
  },
  server: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/api': {
        target: 'IP/URL',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist',
    assetsDir: '',
    sourcemap: false,
    minify: true,
  }
});

Let's go over some key settings in this file:

• plugins: An array of plugins to use in your Vue.js app. We're using the @vitejs/plugin-vue and vite-plugin-vuetify plugins.

• resolve: An object that defines how Vite resolves modules. We're setting an alias for the src directory and including some common file extensions.

• server: An object that defines Vite's local server settings. We're setting the host to allow access from any IP address, the port to 8080, and a proxy for requests to the /api endpoint.

• build: An object that defines Vite's build settings. We're setting the outDir to dist, assetsDir to an empty string, and enabling minification.

Now that we have our vite.config. file set up, let's create a service.js file to store our API logic.

Creating a service.js file

In our service.js file, we'll create an Axios instance with a base URL of . We'll also create a function to make a GET request to the /api endpoint and return the response.

import axios from "axios";

// // The base URL for API requests
const API_URL = "/api";

// Create an instance of axios with the base URL of the API
const api = axios.create({
  baseURL: API_URL
});


// Export axios instance
export default api;

Conclusion

In this article, we learned how to configure the vite.config.js file to set up a development server for our Vue.js app. We also learned how to create an API service using Axios to interact with our backend API. By combining these two concepts, we were able to build a fully functional Vue.js app that interacts with a backend API server.

I hope you found this article helpful. If you have any questions or comments, feel free to leave them below!