Velkommen tilbage til endnu en omgang Vibe Coding i Lovable.
I Episode 1 fik vi skabt en landing page til bryllupsarrangører, hurtigt, og på en måde der viste, hvordan AI-værktøjer som Lovable ikke bare hjælper dig frem, de inviterer dig til at bygge videre, eksperimentere og lære.
Og det er præcis det, vi gør i dag.
For når først du har en landing page, dukker det næste behov ret naturligt op:
“Jeg vil gerne kunne dele indhold. Jeg vil gerne have en blog.”
Det er også nu, vi for alvor begynder at mærke forskellen på at “bygge noget i hånden” og at vibe code noget frem.
Så lad os tage det næste skridt sammen.
🎥 Se hele videoen her:
https://www.youtube.com/watch?v=LdGwY0MZbaI&t=133s
Fra landing page til blog i Lovable, sådan bygger du videre med Vibe Coding
Med landing pagen på plads er næste logiske skridt at skabe et sted, hvor du kan dele indhold. Brugbar viden. Inspiration. Alt det, der i sidste ende skaber relationer til dine kunder.
Du skriver blot i Lovable:
“Lav en separat blogside på /blog. Den skal vise blogpost. Jeg vil have admin-login og mulighed for at lave indlæg med titel, billede og tekst.”
Og Lovable går i gang, uden drama, uden kode, uden forvirring.
Det er netop her, Vibe Coding viser sin styrke:
Du beskriver intentionen. AI bygger funktionen.
Sådan opsætter du en blog i Lovable med AI – trin for trin
Bloggen består af tre dele:
- En offentlig side, hvor dine læsere kan se alle indlæg
- En underside, hvor hvert blogindlæg vises separat
- Et admin-dashboard, hvor du kan logge ind og oprette, redigere og slette indlæg
Lovable håndterer det hele automatisk, når du beskriver, hvad du vil have. Og den tilføjer endda en lille “Admin Login”-knap nederst på siden, så du kan komme til din backend uden at forstyrre dine besøgende.
Efter bare et prompt er blogstrukturen synlig i navigationen som et nyt menupunkt: Blog.
Supabase og Lovable: Sådan håndterer AI din backend automatisk
Fordi en blog kræver mere end frontend... som at fx at kunne gemme indhold, så tager Lovable Supabase med ind i projektet.
Du får en popup:
“Vil du forbinde til Supabase?”
Du klikker “Allow”.
Lovable opretter derefter:
- en databasetabel til brugere
- en tabel til blogindlæg
- policies, så alt er sikkert
- API endpoints til både oprettelse, redigering og hentning af indhold
Det hele sker uden at du selv skal opsætte en database, vælge datatyper eller tænke over backend-logik.
Lovable tager sig af det, så du kan fokusere på indholdet.
Test af blogfunktionen i Lovable: Upload, billeder og publicering
Lad os sige, du skriver dit første indlæg:
- Titel: 5 alkoholfri drinks til dit bryllup
- Billede: upload et passende foto
- Indhold: en hurtig intro, eller “bla bla bla”, hvis du bare tester
Klik Publicér.
Og så ligger indlægget live.
Med billede.
Med dato.
Med læsevenlig struktur.
Med en tilbage-knap til blogoversigten.
Det ser overraskende professionelt ud, selvom det hele blev lavet på under et kvarter.
Det er netop det, Vibe Coding handler om:
At gøre udvikling let nok til, at du faktisk får tingene ud i verden.
Debugging: rette fejl og mangler i vores blog
Når man bygger noget i Lovable, skal der næsten altid lige justeres et par småting.
Og i vores tilfælde var der to områder, der krævede en hurtig omgang debugging.
🔧 1. Navigationen opførte sig forvirrende
Da vi klikkede ind på et blogindlæg, var de gamle menupunkter fra forsiden stadig synlige: “om os”, “ydelser”, “proces”, “kontakt”, men der skete absolut ingenting, når man klikkede på dem.
Det føltes som at have døre, der er malet på en væg: de ser rigtige ud, men man kan ikke bruge dem.
Løsning:
Skjul navigationselementerne i bloguniverset, og lad i stedet logoet fungere som “tilbage til forsiden”.
🔧 2. Logout satte os af det forkerte sted
Efter vi havde arbejdet i admin-delen, klikkede vi “log ud”, og endte på en ren admin-login-side uden nogen vej tilbage til selve hjemmesiden.
Det føltes som at gå ud gennem bagdøren og opdage, at man er låst inde i gården.
Løsning:
Lav et redirect tilbage til forsiden eller blogoversigten, så brugeren ikke hænger fast på login-siden.
Kort sagt: det var småting, men nødvendige småting. Og hver gang blev de løst direkte gennem Vibe Coding, blot ved at formulere, hvad vi ønskede ændret.
Vibe Coding i praksis: Derfor behøver du ikke kode for at bygge webfunktioner
Her opstår den rigtige “Vibe” i Vibe Coding:
Du beder ikke om kode.
Du beder om intention.
Lovable omskriver selv komponenter, templates og CSS-klasser, når du skriver ting som:
- “Giv blogkortene bløde skygger”
- “Fjern navigationen på blogpost-siderne”
- “Tilføj mulighed for at redigere indlæg”
- “Lav en knap der går tilbage til forsiden”
Du fortæller, hvad du vil have.
AI fortæller aldrig “det kan jeg ikke”, den bygger bare løs.
Det gør udvikling mindre teknisk og mere kreativ.
Mindre tungt og mere legende.
Hvad vi kan bygge i EP3: Notifikationer, formularer og automatisering med AI
Nu hvor bloggen fungerer, er næste skridt at bygge noget, der giver værdi i hverdagen:
- Kontaktformularer
- Automatiske notifikationer, når en bruger skriver til dig
- Opsætning af domæne
- Opsætning af business email på domænet
Det bliver Episode 3.
Konklusion: Hvad Lovable og Vibe Coding betyder for fremtidens no-code udvikling
Efter to episoder har du:
- landing page
- komplet blog
- admin-dashboard
- billedupload
- forbedret navigation
- en hjemmeside der ser ud og føles som et rigtigt produkt
Og du har bygget det uden at kode.
Bare ved at beskrive, hvad du ønsker.
Det her er fremtiden for digital udvikling:
Mere samtale. Mindre kode. Hurtigere resultater.
Tak for at være med på endnu en episode.
Code&Go hjælper virksomheder med at bygge stærke digitale produkter i en tid hvor AI ændrer spillereglerne for innovation, udvikling og vækst. Vi arbejder sammen med teams der vil skabe smartere løsninger, validere idéer hurtigere og bygge forretninger der kan skalere.
Har du brug for sparring eller hjælp til at løfte dit næste produkt eller AI projekt, så er du velkommen til at kontakte os på codego.dk og høre hvordan vi kan støtte din rejse.
