Vue 3 component

The CloudTables component for Vue 3 let's you embed tables directly into your Vue 3 application using a component library and attributes to configure it.

Installing

The CloudTables component for Vue 3 is available as the @cloudtables/vue3 package on npm and can be installed in your Vue application using:

# npm
npm install --save @cloudtables/vue3

# yarn
yarn add @cloudtables/vue3

Use

After npm has finished installing, there are three methods you can use to import the component into your Vue application:

Application.use

Available to your whole application through the application's use() method:

import CloudTables from "@cloudtables/vue3";

const app = createApp(App);
app.use(CloudTables);

Application.component

Available to your whole application through the application's component() method:

import { component as CloudTables } from "@cloudtables/vue3";

const app = createApp(App);
app.component("CloudTables", CloudTables);

Component scoped

Scoped in a component:

import { component as CloudTables } from "@cloudtables/vue3";

export default {
	name: "App",
	components: {
		CloudTables,
	},
};

Once imported a <CloudTables/> component will be available for you to use in your application. It can take the following attributes:

• src The custom url for your CloudTable which can be seen in the Embed page for your data set.
• apiKey would be replaced by your API Key (see the Security / API Keys section in your CloudTables application), or
• token server side generated secure access token that can be used instead of an apiKey
• userId is optional, but will be used to uniquely identify users in the CloudTables interface..
• userName is also optional, but can be used to help identify who made what changes when reviewing logs in CloudTables. It is recommended you include userId and userName.

Security

When embedding CloudTables into your Vue application, you can use a secure access token which is generated by a server-side program, or by embedding your access key directly into the tags.

• API token: We strongly recommend using a server generated secure access token as it will be tied to a single user's session and cannot be reused by anyone else who might intercept the key, or provide any access beyond that specified by the server.
• API key: The API access is embedded directly into the application, but it means the full access of that key is available to the client.

API token

To generate a secure access token use one of our server-side clients (HTTP REST / cURL, Java, .NET, NodeJS, PHP). Then embed your CloudTable into your Vue application using:

<CloudTables
	src="https://sub-domain.cloudtables.io/loader/{datasetId}/table/d"
	token="---"
	userId="---"
	userName="---"
/>

Where:

• {datasetId} - the ID of the data set you'd like to show (see the data set Embed tab for this information).

Note specifically the use of the token attribute which would be given the value of the token generated by the server.

API key (serverless)

Serverless access is faster to setup since you embed the API key directly into your CloudTables tag (but also less secure, since you expose your API key):

<CloudTables
	src="https://sub-domain.cloudtables.io/loader/{datasetId}/table/d"
	apiKey="---"
/>

Here the apiKey attribute is used to give the API key to use.