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
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
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.
Useful links
Understanding the interaction system of the Vue3 application components gives you the opportunity to expand your creativity!