Get started with Vue

Use Seam Components with Vue

Overview

This guide will show you how to use Seam Components inside a Vue application. Seam Components are implemented in React, but may be used anywhere as native web components.

1 - Get a Publishable Key from the Seam Console

To access the Seam API, you'll need a publishable key. This key identifies your application when making requests to Seam and is safe to embed in your frontend code.

Go to console.seam.co and select "Client Sessions" from the sidebar. You should then see a "Publishable Key" that you can copy.

2 - Install `@seamapi/react` in your Vue application

Install the npm package

npm install --save @seamapi/react

Then import the custom elements bundle in you main.js application entrypoint:

import "@seamapi/react/elements.js"

import './assets/main.css'

import { createApp } from 'vue'

3 — Skip Component Resolution

From the Vue Docs:

By default, Vue will attempt to resolve a non-native HTML tag as a registered Vue component before falling back to rendering it as a custom element. This will cause Vue to emit a "failed to resolve component" warning during development. To let Vue know that certain elements should be treated as custom elements and skip component resolution, we can specify the compilerOptions.isCustomElement option.

// Only works if using in-browser compilation.
// If using build tools, see config examples below.
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('seam-')

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('seam-')
        }
      }
    })
  ]
}

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('seam-')
        }
      }))
  }
}

4 - Use the component

Use the components in App.vue:

<main>
  <seam-supported-device-table
    publishable-key="your_publishable_key'"
  ></seam-supported-device-table>
</main>

You should see a list of device models like what's shown below:

Next Steps

Minimal sample app running Seam Web Components in Vue 3.
Minimal sample app running Seam Web Components in Vue 2.
Start connecting devices using Client Side Components or with Client Session Tokens.
View and play with other components in the interactive storybook component library
Check out some Full Example Apps

If you have any questions or want to report an issue, email us at [email protected].

PreviousGet started with Angular NextGet started with Client Side Components

Last updated 1 year ago

Was this helpful?

hashtagOverview

hashtag1 - Get a Publishable Key from the Seam Console

hashtag2 - Install @seamapi/react in your Vue application

hashtag3 — Skip Component Resolution

hashtag4 - Use the component

hashtagNext Steps