How to configure vite.config.js with a service.js file for local development ( vue & vuetify )
Tags: vue, vite, javascript, tutorial
Published: 2023-04-30 03:43:56

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. 

```js
// 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.  

```js
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!