Tying to learn how to use n8n, I created a complete webserver/webapp with common nodes.
*Yeah I know - sounds overkill. Worked on it the last 5 days. *
I tried to make it as reusable as possible (as far as I am currently able to).
It should be possible to create any kind of form, configuration interface (like for home automation) and more.
Included is a login system that uses a real browser session.
The UI is made with VUE3 components (typescript is possible use), using vueEngine to be able to use it in n8n.
I will probably create future versions
with routes
with real session
uses JWT for session data
with login auth
with re-login by JWT
no login token or alike needed by any request, like any WebApp/WebSite
You need to set a passphrase for JWT nodes (it must be the same for each one).
You need to configure the AI Agent node with the needed API key.
workflow to copy and paste:
Readme.md
n8n Chat Interface WebApp as workflow with Vue3
Posted here: https://community.n8n.io/t/n8n-chat-interface-webapp-as-workflow-with-vue3/114334
n8n-chat.json
{
"nodes": [
{
"parameters": {
"content": "## Chat WebApp in vueEngine\n## with Vue3 in PARTS\n- with routes\n- with real session\n- uses JWT for session data\n- with login auth\n- with re-login by JWT\n\n\nℹ️ **Note**\nno login token or alike needed by any request, like any WebApp/WebSite\n\n\n⚠️ **SETUP**\n1. You need to set a passphrase for JWT nodes (it must be the same for each one).\n2. You need to configure the AI Agent node with the needed API key.",
"height": 660,
"width": 280
},
"type": "n8n-nodes-base.stickyNote",
"position": [show original
(this is to large for a post here)
… this was allready the 3rd step up from just sending basic html, trying how to handle post and integrating a basic vueEngine setup.
workflow to copy and paste:
Readme.md
n8n simple start with vueEngine and using POST
Posted here: https://community.n8n.io/t/n8n-chat-interface-webapp-as-workflow-with-vue3/114334
simple.json
{
"nodes": [
{
"parameters": {
"respondWith": "text",
"responseBody": "={{ $json.html }}",
"options": {}
},
"type": "n8n-nodes-base.respondToWebhook",
"typeVersion": 1.2,show original
1 Like
Hey @BananaAcid Welcome to the community!
Really cool to see this type of exploration into frontend solutions within n8n. There was a recent livestream on the frontend topic which you can find here: https://www.youtube.com/watch?v=JXTPdf4X9xc&t=3012s - this showcase would have been a nice inclusion!
I would advise moving this showcase to the Built with n8n Tips & Tricks
Another good idea is starting your own n8n creator page where you can host and share your templates and even sell the really good ones!
All the best!
1 Like
Hi, thank you very much @Jim_Le ,
SETUP