Wanted to return an Iframe for embedding in Notion.

Level 58

To embed your Vue component in Notion, you need to serve it as an HTML page. Notion requires a URL that points to an HTML page, which can then be embedded using an iframe. Here’s a step-by-step solution to achieve this:

Create an HTML file that includes your Vue component:
- You need to create an HTML file that will serve as the entry point for your Vue component.
Set up a simple server to serve the HTML file:
- You can use a simple Node.js server or any static file server to serve the HTML file.
Embed the URL in Notion:
- Use the URL of the served HTML file to embed it in Notion.

Here’s an example of how you can do this:

Step 1: Create an HTML file

Create a file named index.html and include your Vue component in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embed Vue Component</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/kanbancast-components/dist/board-view.es.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        const { createApp, defineProps } = Vue;

        const App = {
            template: `
                <board-view
                    :containerColor="'#3949AB'"
                    class="max-w-screen-2xl"
                    :project-id="1"
                    :api-key="apiKey"
                    statuses=""
                />
            `,
            setup() {
                const apiKey = new URLSearchParams(window.location.search).get('apiKey');
                return { apiKey };
            }
        };

        createApp(App).mount('#app');
    </script>
</body>
</html>

Step 2: Set up a simple server

You can use a simple Node.js server to serve the index.html file. Create a file named server.js:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Make sure you have the index.html file in a public directory.

Step 3: Run the server

Install the necessary dependencies and run the server:

npm install express
node server.js

Step 4: Embed the URL in Notion

Once your server is running, you can access your Vue component at http://localhost:3000/?apiKey=YOUR_API_KEY. Use this URL to embed the iframe in Notion.

<iframe src="http://localhost:3000/?apiKey=YOUR_API_KEY" width="600" height="400"></iframe>

Replace YOUR_API_KEY with the actual API key you want to use.

This should allow you to embed your Vue component in Notion successfully.