Vue(Vite) Quick Start

AI Quick Start

Prerequisites

Before you begin, ensure you have completed the following:

1. Activate CloudBase Environment: Create Environment
2. Install Node.js: Download Node.js (LTS version recommended)

Client

Configure your AI tool to connect with CloudBase capabilities. Supports local and hosted connection. See connection modes.

Step 1: Install / Configure CloudBase

Step 2: Chat with AI

Enter the following in your AI chat in order:

prompt

Install CloudBase Skills: run npx skills add tencentcloudbase/cloudbase-skills -y

Use CloudBase Skills: Use CloudBase Skills: Integrate CloudBase Web SDK in a Vue(Vite) app, including authentication and database

Full Developer Guide

Prerequisites

Before you begin, ensure you have completed the following:

1. Activate CloudBase Environment: Create Environment
2. Install Node.js: Download Node.js (LTS version recommended)

For more details, see: Vue(Vite) Full Documentation

Install SDK

@cloudbase/js-sdk allows you to use JavaScript on Web (such as PC web pages, WeChat H5, etc.) to access CloudBase services and resources.()

npm

npm i @cloudbase/js-sdk

yarn

yarn add @cloudbase/js-sdk

pnpm

pnpm add @cloudbase/js-sdk

Initialize SDK

Add the following code to your Vue project

src/utils/cloudbase.js

import cloudbaseSDK from "@cloudbase/js-sdk";

export const cloudbase = cloudbaseSDK.init({
  env: import.meta.env.VITE_CLOUDBASE_ENV_ID,
  region: import.meta.env.VITE_CLOUDBASE_REGION,
  accessKey: import.meta.env.VITE_CLOUDBASE_ACCESS_KEY
});

.env

# Environment ID
VITE_CLOUDBASE_ENV_ID={%ENV_ID%}

# Region
VITE_CLOUDBASE_REGION={%REGION%}

# Anonymous access token
VITE_CLOUDBASE_ACCESS_KEY={%PUBLISHABLE_KEY%}