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

Fernando Daniel Carballo — Sun, 30 Apr 2023 03:43:56 +0000

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!

Download PDF File in a Web Application with Vue.js and JavaScript.

Fernando Daniel Carballo — Thu, 27 Apr 2023 17:27:30 +0000

In this article, you will learn how to create an option to download a PDF file from a web frontend application using Vue.js and JavaScript. The resulting function will be a reusable component that can be used anywhere in your application.

Creating the component

First, we will create a Vue.js component that contains the necessary logic to download a PDF file when a button is clicked.



<template>
  <div>
    <button @click="downloadPdf">download PDF</button>
  </div>
</template>

<script>
export default {
  name: 'DownloadPdfButton',
  props: {
    pdfUrl: {
      type: String,
      required: true
    },
    pdfFileName: {
      type: String,
      required: true
    }
  },
  methods: {
    downloadPdf() {
      // create element <a> for download PDF
      const link = document.createElement('a');
      link.href = this.pdfUrl;
      link.target = '_blank';
      link.download = this.pdfFileName;

      // Simulate a click on the element <a>
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

This component has two properties: pdfUrl and pdfFileName. pdfUrl is the path of the PDF file you want to download, while pdfFileName is the name of the file that will be displayed in the browser's download window. The downloadPdf function is responsible for creating an "a" link that points to the PDF file and simulates a click on it, triggering the file download.

Using the component

Now that we have created the component, we can use it anywhere in our application. To do this, we simply import the component and include it in the HTML code where we want the download button to appear. Here's an example:



<template>
  <div>
    <h1>Mi proyecto frontend</h1>
    <download-pdf-button :pdf-url="pdfUrl" :pdf-file-name="pdfFileName" />
  </div>
</template>

<script>
import DownloadPdfButton from '@/components/DownloadPdfButton.vue';

export default {
  name: 'MyProject',
  components: {
    DownloadPdfButton
  },
  data() {
    return {
      pdfUrl: '/path/to/my/file.pdf',
      pdfFileName: 'my-pdf-file.pdf'
    };
  }
};
</script>

In this example, we have imported the DownloadPdfButton component and included it in the HTML code using the tag. We have also created two variables in the Vue instance (pdfUrl and pdfFileName) which we pass as properties to the component. These variables represent the path of the PDF file and the name of the file, respectively.

In Vue Composable format

Here is an example of how you could create a composable for downloading PDFs in Vue.js:



<script>
export default function useDownloadPdf() {
  function downloadPdf(pdfUrl) {
    const link = document.createElement('a');
    link.href = pdfUrl;
    link.target = '_blank';
    link.download = 'my-pdf-file.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  return {
    downloadPdf,
  };
}
</script>

In this example, the composable useDownloadPdf returns a function downloadPdf that takes the location of the PDF file as a parameter. The downloadPdf function creates an "a" link with the href, target, and download attributes, and then adds it to the document body and simulates a click on the link.

To use this composable in your component, you just need to import it and call the downloadPdf function passing the location of the PDF file as a parameter.



<template>
  <div>
    <button @click="downloadPdf('/path/to/my/file.pdf')">Descargar PDF</button>
  </div>
</template>

<script>
import useDownloadPdf from './useDownloadPdf';

export default {
  name: 'MyComponent',
  setup() {
    const { downloadPdf } = useDownloadPdf();

    return {
      downloadPdf,
    };
  },
};
</script>

In this example, the component imports the useDownloadPdf composable and calls the downloadPdf function in its setup method, passing the PDF file location as a parameter. The download button in the template calls the downloadPdf method when clicked.

Conclusion

Congratulations! Now you know how to create a feature to download PDF files in a frontend web application using Vue.js and JavaScript. In both cases, the code can be even shorter depending on which syntax you prefer to use in Vue. I hope this article has been useful to you and that you can apply this functionality in your future projects🙂.

Forem: Fernando Daniel Carballo

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

Configuring vite.config.js

Creating a service.js file

Conclusion

Download PDF File in a Web Application with Vue.js and JavaScript.

Creating the component

Using the component

In Vue Composable format

Conclusion