Comment on page
Get started with Vue
Use Seam Components with Vue
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.
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.
Install the npm package
npm install --save @seamapi/react
# or via yarn
yarn add @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'
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 thecompilerOptions.isCustomElementoption.
Vue 3 In-Browser Config
Vue 3 Vite Config
Vue 3 CLI Config
Vue 2 Config
// 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-')
}
}))
}
}
// Before calling new Vue(...)
Vue.config.ignoredElements = [/^seam-/]
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:
If you have any questions or want to report an issue, email us at [email protected].
Last modified 4mo ago