Skip to content

Instantly share code, notes, and snippets.

@BananaAcid

BananaAcid/Readme.md

Last active May 12, 2025 19:57
Show Gist options
  • Save BananaAcid/3b30f426c7f6594c03664d64c0d2c0f1 to your computer and use it in GitHub Desktop.
Save BananaAcid/3b30f426c7f6594c03664d64c0d2c0f1 to your computer and use it in GitHub Desktop.
Download ZIP
n8n simple vueEngine website as workflow
Raw
simple.json
{
"nodes": [
{
"parameters": {
"respondWith": "text",
"responseBody": "={{ $json.html }}",
"options": {}
},
"type": "n8n-nodes-base.respondToWebhook",
"typeVersion": 1.2,
"position": [
740,
300
],
"id": "7f03fc96-184c-4e5f-bd3b-7f8b96819518",
"name": "Respond to Webhook1"
},
{
"parameters": {
"path": "0338f2da-389b-49a4-ad0d-18e02e1f300c/vue",
"responseMode": "responseNode",
"options": {}
},
"type": "n8n-nodes-base.webhook",
"typeVersion": 2,
"position": [
160,
300
],
"id": "9f4acef9-dd05-4394-8cc9-ec1142624a1a",
"name": "Webhook: /vue",
"webhookId": "0338f2da-389b-49a4-ad0d-18e02e1f300c"
},
{
"parameters": {
"httpMethod": "POST",
"path": "0338f2da-389b-49a4-ad0d-18e02e1f300c/vue",
"responseMode": "responseNode",
"options": {}
},
"type": "n8n-nodes-base.webhook",
"typeVersion": 2,
"position": [
160,
460
],
"id": "a35cae45-1ef9-496d-9e2f-a3ae316d7000",
"name": "Webhook POST1",
"webhookId": "3fa53bdc-7816-4826-a9ae-4a547ef5b7fa"
},
{
"parameters": {
"mode": "raw",
"jsonOutput": "{\n \"method\": \"POST\"\n}\n",
"includeOtherFields": true,
"options": {}
},
"type": "n8n-nodes-base.set",
"typeVersion": 3.4,
"position": [
320,
460
],
"id": "1bda172e-f2d6-4cc3-9521-e7b1e795ef95",
"name": "Add 'method=POST'1"
},
{
"parameters": {
"content": "## WebApp in vueEngine\n## with Vue3\n",
"height": 500,
"width": 1140
},
"type": "n8n-nodes-base.stickyNote",
"position": [
-160,
260
],
"typeVersion": 1,
"id": "2b80c586-143f-491a-8e27-847039d7b549",
"name": "Sticky Note"
},
{
"parameters": {
"httpMethod": "POST",
"path": "0338f2da-389b-49a4-ad0d-18e02e1f300c/vue/data.json",
"options": {
"responseData": "={\"success\": true, \"now\": \"{{$now}}\"}"
}
},
"type": "n8n-nodes-base.webhook",
"typeVersion": 2,
"position": [
160,
600
],
"id": "02cfdea9-9bab-4211-b371-82d334a7058d",
"name": "Webhook POST : JSON endpoint1",
"webhookId": "3fa53bdc-7816-4826-a9ae-4a547ef5b7fa"
},
{
"parameters": {
"content": "<-- allow VUE to know it was POST",
"height": 80,
"width": 280
},
"type": "n8n-nodes-base.stickyNote",
"position": [
500,
480
],
"typeVersion": 1,
"id": "86b87f52-c6b8-409b-8ac9-2d07bfbbe626",
"name": "Sticky Note2"
},
{
"parameters": {
"html": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vue SPA</title>\n <style>\n html {\n place-items: center;\n align-content: center;\n height: 100vh;\n }\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n }\n xmp {\n display: none;\n }\n </style>\n <script type=\"module\">globalThis.n8n_data = {{ JSON.stringify($json) }}; globalThis.n8n_data.method = globalThis.n8n_data.method ?? 'GET';</script>\n </head>\n <body>\n <div id=\"app\">\n <progress>loading ...</progress>\n </div>\n\n <xmp type=\"app\" id=\"App.vue\">\n <template>\n <div class=\"page\">\n <h1>App.vue only, all in one</h1>\n <p>... except the main js file, for readability</p>\n <p>This is an embedded component (tag is in index.html) and using less.</p>\n <SubComp />\n <br />\n <p>There is nothing more to it. <a href=\"./\">go back</a></p>\n </div>\n </template>\n\n <style lang=\"less\" scoped>\n .page {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n max-width: 800px;\n margin: 0 auto;\n\n @color: #34495e;\n h1 {\n color: #2c3e50;\n margin-bottom: 1rem;\n }\n p {\n color: @color;\n line-height: 1.6;\n }\n }\n </style>\n </xmp>\n\n <xmp type=\"component\" id=\"SubComp.vue\">\n <template>\n <p>This is a Sub Component</p>\n <p>now: {{ $now }}</p>\n <p>vue val: {{ '{{val}'+'}' }}</p>\n <p>method: {{ '{{n8n.method}'+'}' }}</p>\n </template>\n <style scoped>\n p { border: 1px solid gray; padding: .5em 1em; }\n </style>\n <script setup>\n import {ref} from 'vue';\n \n let val = ref('abc');\n\n let n8n = ref(globalThis.n8n_data);\n </script>\n </xmp>\n\n <!-- vueEngine stuff below, no need to modify ------------------------------------------------------->\n\n <script type=\"importmap\" id=\"vueBasics\">\n {\n \"imports\": {\n \"vue\": \"https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js\",\n \"vue-router\": \"https://unpkg.com/vue-router@4/dist/vue-router.esm-browser.prod.js\",\n \"vue3-sfc-loader\": \"https://unpkg.com/[email protected]/dist/vue3-sfc-loader.esm.js\",\n \"less\": \"https://cdn.jsdelivr.net/npm/less@4/dist/less.min.js/+esm\"\n }\n }\n </script>\n\n <script type=\"module\" id=\"vueEngine\" src=\"https://unpkg.com/vue3-esm-browser-vueengine\"></script>\n </body>\n</html>"
},
"type": "n8n-nodes-base.html",
"typeVersion": 1.2,
"position": [
500,
300
],
"id": "48381341-9b47-411a-af68-3fc4ce42c43c",
"name": "HTML: /1"
}
],
"connections": {
"Webhook: /vue": {
"main": [
[
{
"node": "HTML: /1",
"type": "main",
"index": 0
}
]
]
},
"Webhook POST1": {
"main": [
[
{
"node": "Add 'method=POST'1",
"type": "main",
"index": 0
}
]
]
},
"Add 'method=POST'1": {
"main": [
[
{
"node": "HTML: /1",
"type": "main",
"index": 0
}
]
]
},
"HTML: /1": {
"main": [
[
{
"node": "Respond to Webhook1",
"type": "main",
"index": 0
}
]
]
}
},
"pinData": {},
"meta": {
"templateCredsSetupCompleted": true,
"instanceId": "9581afab26398a75f061401b855816854bd308deae5b21ead05c2b0441020e53"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment