How to deploy a Vue 3 application on the Composition API

A simple step-by-step instruction for deploying/installing the Vue 3 application on the Composition API with a simple graph based on its architecture using Chart.js .

Step 1: Create a new Vue project

Make sure that you have Node installed.js and npm. Then create a new Vue project using the Vue CLI.

npm install -g @vue/cli
vue create vue-chart-demo

Follow the instructions in the terminal and select the default settings.

Step 2: Install the required library

Go to your project folder and install the packageChart.js :

cd vue-chart-demo
npm install chart.js

how to deploy the Vue 3 + ChartJS mini-app

Step 3: Create a component for the graph

Create a new component, for example ChartComponent.vue in the src/components folder:

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

export default {
  name: 'ChartComponent',
  setup() {
    const chart = ref(null);

    onMounted(() => {
      const ctx = document.getElementById('myChart').getContext('2d');
      chart.value = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
          datasets: [{
            label: 'Simple line graph',
            data: [0, 10, 5, 2, 20, 30],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    });

    return { chart };
  }
};
</script>

Step 4: Importing and using the component

Open the src/App.vue file and import the created component:

<template>
  <div id="app">
    <ChartComponent />
  </div>
</template>

<script>
import ChartComponent from './components/ChartComponent.vue';

export default {
  name: 'App',
  components: {
    ChartComponent
  }
};
</script>

Step 5: Launch the project

Now you can launch your Vue application:

npm run serve

Open a browser and go to http://localhost:8080 to view your line graph.

Now all that remains is to compile our application on Vue 3

Project Assembly steps

Go to your project folder
Open a terminal and navigate to the directory of your Vue project, if you haven't already done so:
```
cd vue-chart-demo
```
Run the build of the project
Use the following command to compile the project for the production environment:
```
npm run build
```
Find the compiled files
After the build is completed, the Vue CLI will create a new folder called dist in the root directory of your project. This folder will contain all the compiled files of your application.

Before building, make sure that in the vue.config file.js the base path is set, relative to which all js and css files in the source file will be connected index.html

how to deploy a Vue 3 + ChartJS - 1 mini-application

What should I do with the collected files?

Now you have a compiled application that you can deploy on a web server. In the dist folder you will find HTML, CSS and JS files that can be placed on any web server (for example, Apache, Nginx or on hosting services like Netlify, Vercel, etc.).

Additional commands

To launch a project in development mode: If you want to run the project in development mode (with hot swap), use the command:
```
npm run serve
```
Build Configuration settings: To change compilation settings such as minimization, output file names, and other parameters, open the filevue.config.js , if it exists, or create it in the root directory of your project.

Note

Don't forget to check that you have all the necessary dependencies installed to avoid problems during the build. You can install dependencies using the command:

npm install

Conclusion

Now you have a simple Vue 3 application with a line graph built using Chart.js . You can customize the charts as you wish by changing the data, colors, and style settings in the ChartComponent.vue component.

Additional settings

By understanding this approach, you can further expand your application, for example, by adding a custom form for entering certain data for their subsequent processing and plotting various graphs using Chart.js .

Here are some ideas for further work with this application:

Add more datasets to show multiple lines on the same graph.
Explore the different chart types available in Chart.js, such as histograms, pie charts, and printouts.
Customize the graph styles by adding additional options to the options object.
Work with dynamic data by integrating APIs to receive and display real-time data.