Do you want to show the live price of Bitcoin on your website?
In this blog, I’ll show you how to create a simple real-time BTC/USDT price viewer using Vue 3 and Bitget API.
No authentication or API key is needed. We will use Bitget’s public price API, and the result will update every 3 seconds.
Let’s get started!
🔹 What You’ll Learn
-
How to use Vue 3 Composition API
-
How to fetch Bitcoin price from Bitget API
-
How to update the price automatically every few seconds
-
How to format the price with commas and 2 decimal places
🔹 Step 1: Create a Vue Component That Displays the Bitcoin Price
To begin building our Bitcoin price viewer, the first thing we need is a Vue component, a self-contained building block of our user interface. In Vue.js, components are used to split the UI into reusable parts. In our case, we'll create a single, focused component whose only job is to display the current price of Bitcoin. Let's call it BitcoinPrice.vue. You can place this file inside your src/components folder. This naming convention helps keep your project organized and makes it easy to find reusable UI elements.
Once the file is created, we start by writing the basic template. The <template> section in Vue is where you define the HTML structure that will be shown on the screen. Think of it as what the user will see in their browser. Here's what the user will see in their browser.
<template>
<div class="price-box">
<h2>Bitcoin (BTC/USDT)</h2>
<p class="price">Current Price: {{ formattedPrice }}</p>
</div>
</template>
We start by wrapping everything inside a <div> with the class name price-box. This container holds the entire layout for our Bitcoin price display. Later, we'll apply some CSS styling to make it look elegant and straightforward. Inside this box, it's tracking the price of Bitcoin against USDT, which is one of the most commonly used trading pairs on crypto exchanges. The key part here is the paragraph tag <p> that shows the current price. We’re using Vue’s data binding syntax — those double curly braces {{ }} — to connect our template to a JavaScript variable. That variable, called formattedPrice, will hold the latest Bitcoin price once we fetch it. We'll make sure it's displayed in a friendly format, with two decimal points and comma separators, like "105,944".
At this stage, the component doesn't actually do anything dynamic. It's just the front-end structure, the visual part of the app. But that's exactly what we want for now. It gives us a clean layout that we can later connect to live data. This way of separating the display(HTML) from the logic(JavaScript) is very common in Vue and helps keep your code organized. Once we connect it to the Bitget API, this component will start updating itself automatically with real-time prices.
Next, we'll write the logic to actually fetch the Bitcoin price and refresh it every few seconds, that's when this UI really comes to life.
🔹 Step 2: Connect to Bitget API and Fetch Live Bitcoin Price
Now that our visual layout is in place, it's time to make it actually work by connecting to a real-world data source. In this step, we'll fetch live Bitcoin prices using the Bitget API and update our component automatically every few seconds. This will turn our static template into a real-time crypto price widget. To do this, we move into the <script setup> section of our BitcoinPrice.vue file. Vue 3's <script setup> is a powerful and concise way to write logic directly inside your component. It's reactive by default, meaning changes to our data will instantly show up on screen. No extra wiring needed. We start by defining a reactive variable called price using Vue's ref() function. This variable will hold the most recent Bitcoin price we get from the API. We also create an async function called fetchPrice() that sends a request to the Bitget public API:
const url = 'https://api.bitget.com/api/spot/v1/market/ticker?symbol=BTCUSDT_SPBL'
Inside the fetchPrice() function, we send the request using fetch(), and once we get successful response, we parse the price like this:
price.value = parseFloat(data.data.close)
We also include a simple error check — if the API responds with an unexpected code, we log the error so we can debug later.
To make our component update the price regularly, we set up a timer using setInterval(). Every 3 seconds, the fetchPrice() function will run again and refresh the price.
To manage this interval safely, we use Vue’s onMounted() and onUnmounted() lifecycle hooks. When the component appears on screen, it starts fetching. When it disappears, the interval is cleared to avoid memory leaks.
Finally, we define a computed variable called formattedPrice that formats the raw number to look clean, with commas and exactly two decimal points. This makes it easier to read, especially for larger numbers like Bitcoin’s price.
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
This endpoint gives us a JSON response that contains many useful details about the current BTC/USDT market. But for now, we're only interested in the "close" field, which is the latest price.
// Reactive variable to store the price
const price = ref(null)
let intervalId = null
// Function to get the latest price
async function fetchPrice() {
const url = 'https://api.bitget.com/api/spot/v1/market/ticker?symbol=BTCUSDT_SPBL'
try {
const res = await fetch(url)
const data = await res.json()
if (data.code === '00000') {
price.value = parseFloat(data.data.close)
console.log("Current BTC Price:", price.value)
} else {
console.error("API Error:", data.msg)
}
} catch (e) {
console.error("Fetch Error:", e)
}
}
// Start auto-update every 3 seconds
function startInterval() {
if (intervalId) clearInterval(intervalId)
fetchPrice()
intervalId = setInterval(fetchPrice, 3000)
}
// Start on mount and clear on unmount
onMounted(() => startInterval())
onUnmounted(() => clearInterval(intervalId))
// Format price with commas and 2 decimals
const formattedPrice = computed(() => {
if (price.value === null) return 'Loading...'
return price.value.toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})
})
</script>
🔹 Step 3: Styling the Bitcoin Price Component
<style scoped>
.price-box {
padding: 1rem;
background: #1e1e1e;
border: 1px solid #444;
border-radius: 10px;
color: #00ffc8;
font-family: 'Segoe UI', sans-serif;
max-width: 400px;
margin: 1rem auto;
}
.price {
font-size: 1.8rem;
font-weight: bold;
}
</style>
🔹 Result
Bitcoin (BTC/USDT)
Current Price: 105,944.12
Comments
Post a Comment