DEV Community: Alexander Gekov

2026 - The year of the Ralph Loop Agent

Alexander Gekov — Thu, 08 Jan 2026 15:33:16 +0000

We're barely a week into 2026, and tech Twitter is already ablaze with discussion of the "Ralph Wiggum Loop" — a technique that's challenging how we think about autonomous AI development. Named after the lovably persistent Simpsons character known for the "I'm in danger" meme, this approach is proving that sometimes naive persistence beats sophisticated complexity.

What Is the Ralph Wiggum Loop?

The Ralph Wiggum technique, originally coined by Geoffrey Huntley, is elegantly simple yet surprisingly powerful:

while :; do cat PROMPT.md | agent ; done

That's it. An infinite loop that repeatedly feeds the same prompt to an AI coding agent. But here's the clever part: progress doesn't persist in the LLM's context window — it lives in your files and git history. When the context fills up, you get a fresh agent with fresh context, picking up where the last one left off.

As Huntley puts it: "That's the beauty of Ralph - the technique is deterministically bad in an undeterministic world."

The Problem Ralph Solves

Traditional LLM conversations suffer from what Huntley calls "the malloc/free problem":

In traditional programming: You malloc() memory and free() it when done
In LLM context: Reading files, tool outputs, and conversation history acts like malloc(), but there's no free() — you can't selectively release context
The result: Context pollution and "the gutter"

Context pollution happens when failed attempts, unrelated code, and mixed concerns accumulate and confuse the model. Once polluted, the model keeps referencing bad context — like a bowling ball in the gutter, there's no saving it.

Ralph's solution? Deliberately rotate to fresh context before pollution builds up. State lives in files and git, not in the LLM's memory.

Why It's Taking Off in 2026

The technique has now been implemented as an official plugin for Cursor, cementing its status from interesting experiment to legitimate tool. And it points to a larger trend: as LLMs improve, we're seeing less need for complex workflows like RAG and other "old school" techniques. Given enough time and iterations, modern LLMs can successfully follow a task through its entire development cycle.

How Ralph Works: Context Management at Scale

The implementation is more sophisticated than a simple loop. Here's the architecture:

┌─────────────────────────────────────────────┐
│            ralph-loop.sh                     │
│                 ▼                            │
│  cursor-agent --output-format stream-json    │
│                 ▼                            │
│          stream-parser.sh                    │
│         │              │                     │
│         ▼              ▼                     │
│    .ralph/         Signals                   │
│    ├── progress.md   ├── WARN at 70k tokens │
│    ├── guardrails.md ├── ROTATE at 80k      │
│    └── activity.log  └── GUTTER detection   │
│                                              │
│  When ROTATE → fresh context with state      │
└─────────────────────────────────────────────┘

Key features include:

Accurate token tracking - Counts actual bytes from every file read/write
Gutter detection - Identifies when the agent is stuck (same command failed 3x, file thrashing)
Learning from failures - Agent updates guardrails.md with lessons learned
State in git - Frequent commits ensure the next agent picks up seamlessly

Each iteration:

🟢 Healthy (< 60% tokens): Agent works freely
🟡 Warning (60-80%): Agent gets a heads-up to wrap up current work
🔴 Critical (> 80%): Forced rotation to fresh context

The Learning Loop: "Signs" That Persist

One of Ralph's most clever features is the guardrails system. When something fails, the agent adds a "Sign" to .ralph/guardrails.md:

### Sign: Check imports before adding
- **Trigger**: Adding a new import statement
- **Instruction**: First check if import already exists in file
- **Added after**: Iteration 3 - duplicate import caused build failure

Future iterations read these guardrails first and follow them, preventing repeated mistakes. It's a simple but effective form of agent memory across context rotations.

Getting Started with Ralph

Installation is straightforward:

cd your-project
curl -fsSL https://raw.githubusercontent.com/agrimsingh/ralph-wiggum-cursor/main/install.sh | bash

Then define your task in RALPH_TASK.md:

---
task: Build a REST API
test_command: "npm test"
---

# Task: REST API

Build a REST API with user management.

## Success Criteria

1. [ ] GET /health returns 200
2. [ ] POST /users creates a user  
3. [ ] GET /users/:id returns user
4. [ ] All tests pass

The checkbox format is crucial — Ralph tracks completion by counting unchecked boxes.

Start the loop:

./.cursor/ralph-scripts/ralph-loop.sh

And monitor progress:

tail -f .ralph/activity.log

What Ralph Excels At

Ralph shines with tasks that have machine-verifiable success criteria. Think:

✅ Test coverage improvements
✅ Code refactoring with test suites
✅ Database migrations
✅ API implementations with integration tests
❌ "Make this prettier" (too subjective)

As TypeScript guru Matt Pocock suggests, structure your tasks like user stories:

User Story
Description
Success criteria
Passes (true/false)

Real-World Example: Building a Game Autonomously

I recently gave my Cursor CLI agent access to the Replica MCP server and let Ralph loose on building a Fruit Ninja clone. The task file was comprehensive but clear, with specific success criteria around game mechanics, scoring, and UI interactions.

The result after ~1 hour with zero guidance: A fully functional Fruit Ninja clone

The agent went through 8 context rotations, learned from several failed attempts at canvas rendering (documented in guardrails), and ultimately delivered a polished game with proper collision detection, scoring, and even sound effects.

The Cost of Persistence

Since Ralph can run for extended periods, it's capped at 20 iterations by default. The technique works best with Cursor's Ultra or Max plans (starting at $200/month) due to the token consumption. But here's the thing: you're trading compute cost for developer time — and the math often works out favorably.

One hour of autonomous development at full speed vs. a day of human back-and-forth? For many tasks, Ralph wins.

Is This Just Hype?

The Ralph Wiggum Loop represents a philosophical shift in how we work with AI coding agents. Instead of trying to maintain perfect context and carefully curate what the LLM "remembers," we embrace fresh starts and let git be the memory layer.

It's not suitable for every task — anything requiring deep understanding of a large codebase or nuanced judgment calls still needs human guidance. But for well-defined, test-driven development tasks, Ralph's naive persistence might just be the most sophisticated approach.

As we move through 2026, I suspect we'll see more techniques that leverage long-running, autonomous agents with smart context management. The question isn't whether Ralph has a place in our workflows — it's what other "deterministically bad" techniques we haven't discovered yet.

What do you think? Is the Ralph Wiggum Loop a flash in the pan, or are we witnessing the emergence of a new paradigm in AI-assisted development?

Resources:

Building Chrome Extensions with Plasmo

Alexander Gekov — Fri, 19 Dec 2025 09:28:46 +0000

Introduction

At TalentSight, we've built a web platform that integrates deeply with LinkedIn. However, we noticed our recruiters were spending most of their time directly on LinkedIn rather than our platform. This led us to an important realization: we needed to bring our tools to where our users actually work.

The solution? A Chrome extension that embeds custom buttons and actions directly into LinkedIn, allowing recruiters to use TalentSight's features without ever leaving their workflow. In this tutorial, I'll walk you through how we built this using the Plasmo framework, and show you how to create your own Chrome extension.

What is Plasmo?

Plasmo is a browser extension SDK that dramatically simplifies extension development. Instead of wrestling with Chrome's complex manifest files and messaging APIs, Plasmo provides:

React component support out of the box
Built-in handling of pop-ups and messaging APIs
Automatic management of browser APIs
Hot module replacement for faster development
TypeScript support by default

Think of it as the Next.js of browser extensions. It handles the boilerplate so you can focus on building features.

Getting Started with Plasmo

Initial Setup

To create a new Plasmo project, run the following command with your preferred package manager:

npm create plasmo
# or
pnpm create plasmo
# or
yarn create plasmo

This scaffolds a complete project structure with everything you need to get started.

Project Structure

After scaffolding, you'll see several key files:

popup.tsx - The React component that displays when users click your extension icon
assets/ - Where you store icons and images for your extension
package.json - Contains dependencies and web manifest fields needed for publishing

The beauty of Plasmo is that it automatically generates the manifest.json file from your package.json, eliminating manual configuration headaches.

Development Workflow

One of Plasmo's best features is live reloading. Start the development server with:

npm run dev

This enables hot module replacement, meaning you can make changes to your code and see them instantly without rebuilding or reloading the extension manually. This is a massive time-saver during development.

Building for Production

When you're ready to package your extension for production:

npm run build

This creates a production-ready build in the build/ folder, optimized for your target browser and environment.

Loading Your Extension in Chrome

Before you can test your extension, you need to load it into Chrome:

Navigate to chrome://extensions in your browser
Enable Developer mode using the toggle in the top right
Click the Load unpacked button that appears
Navigate to your project's build/chrome-mv3-dev folder (or build/chrome-mv3-prod for production builds)
Select the folder to load your extension

Your extension icon should now appear in Chrome's toolbar.

Extension Pages in Plasmo

Plasmo supports several types of extension pages, each serving a specific purpose:

Popup Page (popup.tsx)

The popup appears when users click your extension icon. This is typically your extension's main interface.

function IndexPopup() {
  return (
    <div className="popup-container">
      <h1>Welcome to My Extension</h1>
      <button>Take Action</button>
    </div>
  )
}

export default IndexPopup

Options Page (options.tsx)

The options page provides a settings interface where users can configure your extension. Chrome automatically links to this from the extension management page.

function OptionsPage() {
  return (
    <div>
      <h1>Extension Settings</h1>
      {/* Settings form goes here */}
    </div>
  )
}

export default OptionsPage

New Tab Page (newtab.tsx)

Optionally override Chrome's new tab page with your own custom interface.

Side Panel (sidepanel.tsx)

Create a persistent side panel interface that can stay open while users browse.

Content Scripts: Injecting UI into Web Pages

This is where the real power lies for extensions like ours at TalentSight. Content scripts allow you to inject React components and custom UI elements directly into existing web pages.

Create a content script by adding a file in the contents/ directory:

// contents/linkedin-button.tsx
import type { PlasmoCSConfig } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://www.linkedin.com/*"],
  css: ["content.css"]
}

const LinkedInButton = () => {
  const handleClick = () => {
    // Your custom logic here
    console.log("Button clicked!")
  }

  return (
    <button onClick={handleClick} className="custom-button">
      Save to Talent Site
    </button>
  )
}

export default LinkedInButton

Content scripts let you:

Target specific websites using URL patterns
Inject custom buttons and UI elements
Attach to existing page elements
Execute custom behavior based on page content

This is exactly how we embed TalentSight functionality directly into LinkedIn's interface.

Messaging API: Communicating with Your Backend

Most extensions need to communicate with a backend API to store data, fetch information, or trigger actions. Plasmo's messaging API makes this straightforward.

Setting Up Messaging

First, install the messaging dependency:

npm install @plasmohq/messaging

Creating a Message Handler

Create a message handler in the background script:

// background/messages/api-call.ts
import type { PlasmoMessaging } from "@plasmohq/messaging"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  const { body } = req

  try {
    // Make your API call
    const response = await fetch("https://api.yourbackend.com/endpoint", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body)
    })

    const data = await response.json()

    res.send({
      success: true,
      data: data
    })
  } catch (error) {
    res.send({
      success: false,
      error: error.message
    })
  }
}

export default handler

Sending Messages from Extension Pages

Now you can call this handler from any extension page or content script:

import { sendToBackground } from "@plasmohq/messaging"

const saveToBackend = async (userData) => {
  const response = await sendToBackground({
    name: "api-call", // Must match the handler filename
    body: {
      user: userData
    }
  })

  if (response.success) {
    console.log("Data saved:", response.data)
  } else {
    console.error("Error:", response.error)
  }
}

The standard messaging flow is perfect for one-time requests between extension components. Plasmo also supports relay and ports for more advanced use cases like streaming data or maintaining persistent connections.

Integrating Authentication with Clerk

If your extension connects to a platform where users are already authenticated, you don't want to force them to log in again. Clerk provides seamless authentication integration for Chrome extensions.

For a complete guide on integrating Clerk with your Plasmo extension, including syncing authentication state between your web platform and extension, see the official Clerk documentation for Chrome extensions.

The integration allows you to:

Automatically authenticate users who are logged into your web platform
Sync authentication state across browser tabs
Handle token refresh seamlessly
Provide a smooth user experience without redundant login flows

Publishing Your Extension

Once your extension is ready, you can publish it to the Chrome Web Store:

Create a developer account at the Chrome Web Store Developer Dashboard
Build your production bundle with npm run build
Zip the contents of your build folder
Upload to the Chrome Web Store with required metadata, screenshots, and privacy policy
Submit for review (it can take a while, but after the first submission, next ones will be faster)

Make sure all required manifest fields are properly configured in your package.json before publishing.

Conclusion

Before using Plasmo, our extension was pure HTML,CSS and JavaScript and it was a horrible experience, it didn't match our brand guidelines and was hard to maintain.

Plasmo has transformed how we build browser extensions at TalentSight. What used to require managing complex manifest configurations and wrestling with Chrome's messaging APIs now feels as natural as building a React application.

The key advantages we've experienced:

Faster development with hot module replacement
Type-safe messaging between components
React components work seamlessly
Significantly less boilerplate code
Easy integration with modern tools like Clerk

Whether you're building a productivity tool, a LinkedIn integration like ours, or any other browser extension, Plasmo provides the modern developer experience you'd expect from today's frameworks.

Ready to get started? Create your first Plasmo extension and bring your web application directly to where your users work.

Additional Resources

Plasmo Documentation
Chrome Extension Documentation
Clerk Chrome Extension Guide
Clerk Chrome Extension Sync
TalentSight Extension - See our extension in action

Why I Wrote AI Coding Guidelines and You Should Too

Alexander Gekov — Thu, 18 Dec 2025 20:52:32 +0000

We recently hired someone we already knew well.
We’d worked together before, trusted him, and liked how he approached problems. He has that entrepreneurial mindset, he sees something that needs doing and just does it.

That’s the main reason why we hired him.

He’s is not ultra experienced and so uses Cursor a lot. That’s not a problem, because we do too. Cursor is a great tool and it clearly accelerates development. Speed is the holy grail of every startup.

What we started noticing, though, wasn’t about speed or output. Things worked. PRs went through. But explanations sometimes got thinner. Changes were faster, but sometimes when there were questions, the reasoning and explanations were not explicit.

Not just for him - I felt that apply to all of us.

AI makes it very easy to move forward without fully thinking through what’s happening in the code. It's a double-edged sword and you shouldn't use it carelessly.

The Problem Isn’t AI Usage — It’s AI Dependency

There are many horror stories of corporate outright banning use of AI in their teams. This, however, wasn’t about limiting anyone or telling people to “use AI less.” That misses the point.

Of course AI can sometimes spit out bad code, so called AI slop, but that's not where the risk lies.
The risk is slowly losing the habit of thinking, reasoning, and being able to explain your own decisions.

If you can’t explain what a piece of code does and why it exists, it doesn’t matter how fast it was generated.

Why I Wrote the Guidelines

I wrote the AI guidelines mostly for myself — and for us as a team.

Not to slow anyone down.
Not to restrict tools.
But to make sure we don’t outsource thinking.

The core idea is simple:

You’re always responsible for the code you ship, even if AI wrote it.

AI is great for:

Accelerating implementation
Reducing boilerplate
Helping explore solutions

It should not replace understanding.

What I Want to Preserve

We hire people because they think, reason, and take ownership.

AI should boost and amplify that, rather than slowly erode it.

The guidelines exist to keep us intentional and capable of explaining our systems six months from now, not just shipping something that “works today.”

That’s it.

Almost forgot, here is the link to read the actual guidelines :)

Pinia - Crash Course for Beginners

Alexander Gekov — Fri, 24 Mar 2023 08:38:00 +0000

Introduction

Hello everyone, in this crash course we will be talking about Pinia - the state management library for Vue. We will also be building a simple shopping cart project to showcase how Pinia stores work.

You can follow along here:

The code for the project can be found on my GitHub: https://github.com/alexander-gekov/pinia-cart-tutorial

Content

What is Pinia? (store, state, getters, actions)
Creating a Shopping Cart Project with Pinia
Setting up a Vue.js app with Vite
Installing and Registering Pinia
Creating a Pinia Store
Using store in component and Pinia DevTools
Creating the Cart Store
Adding functionality for Cart
Conclusion
Useful resources

What is Pinia?

Pinia is a state management library for Vue.js.

It is the successor of Vuex the original state management system for Vue. However, nowadays Pinia is the recommended way to manage state as said by the Vue.js Core Team.

The problem that state management solves is the problem of keeping shared state across your Vue components. Without it a lot of the state would have to be passed around using endless amount of props and emits.

Let’s say we have a user who is authenticated, we would like to share that state across our components. We can also later store it in a cookie or local storage so that it persists even after page loads.

Pinia uses “stores” in order to manage state. A Store is compromised of:

state (The data that we want to share)
getters (A way for us to get the data from the state, read only)
actions (Methods that we can use to modify/mutate the data in the state)
~~mutations~~ - One of the differences between Pinia and Vuex is that Pinia does not have explicit mutations defined in the store. They were removed from the store definition due to being too verbose. Read till the end to find out how to monitor mutations in your app.

Another differences between Pinia and Vuex is that Pinia is modular. What that means is that Pinia encourages users to have different stores, each corresponding to a different logic in our app. This is a great approach because it follows the separation of concern principle. On the other hand Vuex had developers manage a single bulky store for the whole application. You can see where I am going with this…

Pinia also has great Typescript support and autocompletion. This helps with the overall development experience, a metric that is becoming ever more important in modern frontend tools.

Another reason to try out Pinia, last one I promise 😃, is that it is incredibly lightweight with a total bundle size of just 1KB.

Shopping Cart App

What we are going to build today to showcase how Pinia works is a simple ecommerce-like website. We will have some products that the user can add to their cart. The cart in the top right corner will need to keep track of the items that the user has added. It will also have to keep track of the quantity of each product as well as calculate the total count and total price.

The design was made with tailwindcss, however, this article will not be focusing on the styling part. If you want you can go to the GitHub repository and clone it to start with a simple UI template I prepared with hardcoded values.

Setting up a Vue.js app with Vite (using vue-ts template)

Let’s start by creating our Vue app. You can use the Vue CLI or Vite for this. I will use Vite as well as the “vue-ts” template provided by vite.

npm create vite@latest pinia-cart-tutorial -- --template vue-ts

Once created, cd into the just created project folder and open it in VS Code. In VS Code I will open the terminal and run npm install.

Now, we can remove the boilerplate code - so remove the Hello World and any unnecessary styling. As I mentioned I won’t go over creating the components and styles, but feel free to look at the GitHub link.

Installing and registering Pinia

Let’s install Pinia by running:

npm install pinia

Once done, we need to go to our main.ts file and register it like this:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'

createApp(App).use(createPinia()).mount('#app')

Now, Pinia should be successfully installed.

Creating the Product Pinia Store

Currently we have an array in our App.vue that we are passing to our components through props. While this is by any means, a valid and totally ok way to pass the state. Imagine if the app was more complex and contained a lot more nested components. We should create a store to keep that state of products.

In our src folder, let’s create a folder called stores. In there create a file ProductStore.ts:

import { defineStore } from "pinia";
import { computed, ref, Ref } from "vue";
import { Product } from "../types/Product";

export const useProductStore = defineStore('products', () => {
    const products: Ref<Product[]> = ref([
        {
          name: 'Bananas',
          price: 5,
          image: 'https://img.freepik.com/free-vector/vector-ripe-yellow-banana-bunch-isolated-white-background_1284-45456.jpg'
        },
        {
          name: 'Strawberries',
          price: 10,
          image: 'https://img.freepik.com/free-photo/strawberry-berry-levitating-white-background_485709-57.jpg?w=2000'
        },
        {
          name: 'Apples',
          price: 15,
          image: 'https://img.freepik.com/premium-photo/red-apples-isolated-white-background-ripe-fresh-apples-clipping-path-apple-with-leaf_299651-595.jpg'
        }
      ]); // ref = state

    const totalPrice = computed(
        () => products.value
        .map(p => p.price)
        .reduce((a, b) => a + b, 0)
    ); // computed = getter

    const addProduct = (product: Product) => {
        products.value.push(product);
    } // method = action

    return {
        products,
        totalPrice,
        addProduct
    }
})

We start by importing the defineStore method from pinia. We then use it to export a const called useProductStore. It is a common convention to prefix stores and composables with the “use” word.
defineStore accepts two arguments, the first being the name of the store, and the second depending on how we write our store (Options API vs Composition API) will either be the object containing the state, getters and actions or a callback that will return an object with the state, getters, actions.
In our store, we are using the Composition API so: ref and reactive become the state, computed variables become getters and methods become actions.

Here is a simple image showcasing Options API store vs Composition API Store:

Using the Pinia store in a component

Back in App.vue we can import it like this:

<script>
import { useProductStore } from './stores/ProductStore';

const productStore = useProductStore();
</script>

<template>
..
</template>

As you can see we import it and then just initialize it. In order to verify that it’s working, we can open our app in Chrome and open Vue Devtools. There should be a new tab for Pinia, where you will be able to see your stores and other relevant data.

What’s more we if we go to the Timeline tab and then to Pinia, we can monitor different actions and mutations happening throughout our app:

Creating the Cart Store

Going back to the stores folder, let’s create CartStore.ts:

import { defineStore } from 'pinia'
import { computed, ref, Ref } from 'vue';
import { Product } from '../types/Product';

export const useCartStore = defineStore('cart', () => {
    const items: Ref<Product[]> = ref([]); // state

    const itemsCount = computed(() => items.value.length); // getter

    const groupedItems = computed(() => {
         return items.value.reduce((acc, item) => {
            if (!acc[item.name]) {
                acc[item.name] = [];
            }
            acc[item.name].push(item);
            return acc;
        }, {} as Record<string, Product[]>);
    }); // getter

    const addItem = (item: Product) => {
        items.value.push({...item});
    } // action

    const removeItem = (item: Product) => {
        const index = items.value.findIndex(i => i.name === item.name);
        items.value.splice(index, 1);
    } // action

    const $reset = () => {
        items.value = [];
    } // action $reset

    return { items, itemsCount, groupedItems, addItem, removeItem, $reset}
});

In this store we keep an array which will hold the products. We have getters for the total count of all products as well as grouping them by their name. This is used to later get the quantity of each product. We also have some actions for adding and removing a product as well as a reset method that will reset the state of the store.

Adding functionality for Cart

Our App.vue should look like this:

<script setup lang="ts">
import { ref } from 'vue';
import Card from './components/Card.vue';
import Cart from './components/Cart.vue';
import NavBar from './components/NavBar.vue';
import { useProductStore } from './stores/ProductStore';
import { useCartStore } from './stores/CartStore';

const showCart = ref(false);

const productStore = useProductStore();
const cartStore = useCartStore();

</script>

<template>
  <div class="relative max-w-6xl mx-auto">
    <!-- NavBar contains the toggle for the cart -->
    <NavBar :show-cart="showCart" @toggleCart="showCart = !showCart"/>
    <!-- Cart Dropdown -->
    <Cart v-if="showCart"/>
    <main class="flex flex-1">
      <!-- Product Card -->
      <Card v-for="product in productStore.products" :key="product.name" :product="product" @add-to-cart="cartStore.addItem"/>
    </main>
  </div>
</template>

<style scoped>
</style>

NavBar - the NavBar contains the shopping cart icon. The NavBar emits an event toggleCart and that is used to toggle the state of showCart which itself toggles the Cart dropdown.
Cart - which is the Cart Dropdown, where the added products will be displayed. More on that in a moment.
Product Card - these are our products, we use the productStore to loop over all the products and display them. The Card also emits an event called addToCart. We then use the cartStore to call the addItem action and add the product to the state.

This is how NavBar.vue shoud look like:

<template>
    <nav class="border border-gray-300 rounded-xl rounded-t-none p-4 mb-10">
      <div class="container flex items-center justify-between">
        <h2 class="font-bold text-2xl w-1/3">Pinia Cart Tutorial</h2>
        <div class="w-1/3">
          <img class="w-12" src="/pinia.png" alt="">
        </div>
        <button @click="$emit('toggleCart')" class="relative hover:bg-gray-200 rounded-full p-2">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
          </svg>
          <div class="bg-red-500 rounded-full px-2 absolute -top-2 -right-2">{{ itemsCount }}</div>
        </button>
      </div>
    </nav>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useCartStore } from '../stores/CartStore';

defineProps({
    showCart: {
        type: Boolean,
        default: false
    },
})

const {itemsCount} = storeToRefs(useCartStore());
</script>

We emit an event “toggleCart”
We have a bubble notifying us how many products are in the cart
We import the useCartStore, however when we want only one or two variables, we can destructure our store using the storeToRefs helper. It will unsure that reactivity is preserved when destructuring our store.

Lastly, this is how Cart.vue looks like:

<template>
    <div class="absolute top-20 right-0 w-1/3 p-4 border rounded-lg bg-white border-gray-300">
          <h1 class="text-xl font-bold">My Cart</h1>
          <ul>
            <li v-for="[name, items] in Object.entries(cartStore.groupedItems)" :key="name">
              <div class="flex items-center justify-between py-2">
                <span>{{name}}</span>
                <div class="flex items-center">
                  <button @click="cartStore.removeItem(items[0])" class="hover:bg-gray-200 rounded-full p-2">
                  -
                </button>
                <span class="mx-2">{{ items.length }}</span>
                <button @click="cartStore.addItem(items[0])" class="hover:bg-gray-200 rounded-full p-2">
                  +
                </button>
                </div>
                <span>${{items.map(i => i.price).reduce((totalItemPrice, price) => totalItemPrice + price, 0)}}</span>
              </div>
            </li>
          </ul>
          <hr class="my-2">
          <div class="flex items-center justify-between">
            <span class="font-bold">Total</span>
            <span class="font-bold">${{ cartStore.items.map(p => p.price).reduce((acc,curr) => acc + curr, 0) }}</span>
          </div>
        </div>  
</template>

<script setup lang="ts">
import { useCartStore } from '../stores/CartStore';

const cartStore = useCartStore();
</script>

We import the useCartStore and we use it to get access to items,groupedItems, removeItem and addItem.
We loop over our groupedItems and display the name, then on removing or adding we use the item at index 0, so the item that is first in the array.
We also calculate the total price per product by using the .reduce method to sum up the individual costs.
Lastly we also calculate the total price for all products, again using the .reduce method

Conclusion

We are now done with our application. You can go on and try adding items to cart. Changing the quantity to 100, or changing it 0 and it disappearing from the cart.

I hope you liked this crash course about Pinia and managed to use it in our example app. If you have any questions don’t hesitate to reach out.

Useful Resources

You can always refer to the official documentation, it is really clear and helpful.

💚 If you want to learn more about Vue and the Vue ecosystem make sure to follow me on my socials. I create Vue content every week and am slowly starting to gain traction so I’d really appreciate your help!

Twitter

YouTube

Overview: One month of creating Vue content

Alexander Gekov — Mon, 06 Mar 2023 08:45:00 +0000

Just do it

I have always been interested in Vue and its ecosystem, but never actually got the courage and motivation to start my own content creation journey. Now it's been just over a month since I decided to start creating Vue-related content and become more active in the Vue community, and what a ride it has been!

Creating Vue content

For the past month, I have written about 5 articles on my blog on dev.to where I now have over 200 followers. I got back into Twitter and have been posting there as well. Following some of the most skilled Vue developers helped me a lot in shaping how I want my future-self to be like. Now I got almost 100 followers on Twitter, hoping to get more noticed in the upcoming months. Lastly, I uploaded 4 videos to my YouTube channel and accumulated so far 200+ subscribers.

To be honest, YouTube was by far the most time-demanding platform, but also the most thrilling and exciting to create content for. I wrote articles for my blog and tried to condense them into short informative videos for the channel. Even though I have some experience with Adobe Premiere, it still was quite hard, especially short videos since they require maybe twice as much transitions, cuts and effects but I am happy with how they’ve turned out.

Sense of belonging and meaning

In the short time since the start of February, I've been blown away by the support and engagement from the community. With every comment I receive I get a big motivation boost to continue doing this. It’s really awesome and reassuring, because for the longest of times I’ve been hesitant on creating whatever content online. I am still not perfect and all-knowing, but nobody is, we all start somewhere and I now realise that.

Developers from all over the world have reached out to me to say how helpful my tutorials and articles have been. It's an incredible feeling to know that I'm making a difference and helping other developers level up their Vue skills.

Vue.js Live Conference

And the cherry on top? I've been selected to speak at the Vue.js Live Conference in London in May! It's hard to put into words how honored and excited I am for this opportunity. Many of the speakers are like some mythical legendary developers who I’ve never imagined I would get the chance to meet and now I will be presenting alongside them. To go from an average Vue developer to a speaker at a major conference in just a few weeks is something my mind could hardly have conceived.

I want to take a moment to express my gratitude to the people who supported and encouraged me. I promise to continue creating valuable content and contribute to the community in any way I can.

Follow me on my journey

If you're interested in following along with my journey, be sure to follow me on Twitter, subscribe to my YouTube channel, and check out my articles. And if you'll be at Vue.js Live in London in May, I'm looking forward to meeting you in person!

Twitter

YouTube

💚 Here's to the next month and beyond. Let's keep building amazing things with Vue.

Creating better Modals using Vue Teleport

Alexander Gekov — Tue, 28 Feb 2023 08:37:26 +0000

Introduction

In this short tutorial I will show you how to build a simple modal and make it reusable by utilizing Vue’s Teleport component and some other neat tricks.

Follow along on YouTube:

Link to code: GitHub

What is Teleport?

<Teleport> is a really cool built-in component introduced in Vue 3. It allows us to "teleport" a part of a component's template into a DOM node that exists outside the DOM hierarchy of that component. What this means is we can render components anywhere on the DOM tree, even if the component lies deeply nested somewhere in the DOM.

The most common example of needing such functionality are elements that sit on top of the app such as modals, popups and notifications. Such elements would be much easier to handle if they were rendered entirely separate from the DOM of our Vue app. This is because handling events, playing around with position and z-index styles can be very hard when having a modal or popup that has many parents it needs to account for.

Setup

I have created a new Vue project using Vite with the vue-ts template.

npm create vite@latest modal-tutorial -- --template vue-ts

I have also installed Tailwindcss in order to style the components. For more information about Vite + Tailwind go here.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Creating our Modal

Let’s create a simple Confirm Dialog modal. We will use Tailwindcss to style it:

Create ModalConfirm.vue:

<template>
    <div
      class="absolute  inset-0 overflow-y-auto bg-black bg-opacity-50"
    >
      <div
        class="flex items-start justify-center min-h-screen mt-24 text-center"
      >
        <div
          class="bg-white text-black rounded-lg text-center shadow-xl p-6 w-64"
          role="dialog"
          aria-modal="true"
        >
          <h3>Do you confirm?</h3>
          <div class="flex justify-center py-4 text-white">
              <!-- We will handle these emits later -->
              <button @click="$emit('close')" class="border border-black bg-white text-black mr-4">No</button>
              <button @click="$emit('close')">Yes</button>
          </div>
        </div>
      </div>
    </div>
</template>

And import it to the App.vue:

<script setup lang="ts">
import {ref} from "vue";
import ModalConfirm from './components/ModalConfirm.vue';

const show = ref(false);

const openConfirm = () => {
  show.value = true;
}

const closeConfirm = () => {
  show.value = false;
}

</script>

<template>
      <div class="flex justify-center items-center min-h-screen">
        <ModalConfirm v-if="show" @close="closeConfirm"></ModalConfirm>
        <button @click="openConfirm">Open Confirm Modal</button>
      </div>
</template>

<style scoped>
</style>

As you can see, here we have some logic about opening and closing the Modal. We also handle the emit from the ModalConfirm component. The modal should look like this:

Breaking our Modal

Currently our modal should be displaying just fine even if it is nested. But let’s try to break it:

<script setup lang="ts">
import {ref} from "vue";
import ModalConfirm from './components/ModalConfirm.vue';

const show = ref(false);

const openConfirm = () => {
  show.value = true;
}

const closeConfirm = () => {
  show.value = false;
}

</script>

<template>
      <div class="flex justify-center items-center min-h-screen">
        <ModalConfirm v-if="show" @close="closeConfirm"></ModalConfirm>
        <button @click="openConfirm">Open Confirm Modal</button>
                <!-- This absolute element will break our modal -->
        <div class="absolute top-20 bg-red-500 p-2 w-full left-0">This will make things ugly</div>
      </div>
</template>

<style scoped>
</style>

We have added a new element with absolute positioning. This is a good example of how hard it can be have your modal nested, because you need to think whether it will conflict with another element.

Let’s have a look at what is happening in the DOM:

As you can see, our modal is rendered on the same level as our “This will make things ugly” element. How much better would it be if the modal could be rendered in another place? Introducing (drum roll…) <Teleport>.

Adding Teleport

Let’s go to our index.html and add a new element with an id=modal. This way our modal will be rendered outside of our Vue app.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <!-- Where our Vue app is mounted -->
    <div id="app"></div>
    <!-- Where our modal will appear -->
    <div id="modal"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Let’s now go back to our App.vue:

<script setup lang="ts">
import {ref} from "vue";
import ModalConfirm from './components/ModalConfirm.vue';

const show = ref(false);

const openConfirm = () => {
  show.value = true;
}

const closeConfirm = () => {
  show.value = false;
}

</script>

<template>
      <div class="flex justify-center items-center min-h-screen">
        <!-- Will render the content in element with id=modal -->
        <Teleport to="#modal">
          <ModalConfirm v-if="show" @close="closeConfirm"></ModalConfirm>
        </Teleport>
        <button @click="openConfirm">Open Confirm Modal</button>
        <!-- This absolute element will break our modal -->
        <div class="absolute top-20 bg-red-500 p-2 w-full left-0">This will make things ugly</div>
      </div>
</template>

<style scoped>
</style>

Using Vue 3’s <Teleport> component we can render the modal outiside the Vue DOM. The component accepts a prop to which is a CSS selector. Here we specify #modal which corresponds to the <div id="modal"> in our index.html page.

If we open our modal again we should see this:

Let’s see how it looks like in the DOM:

Great! Now our modal’s logic is in our Vue app but the modal itself is rendered outside of it and doesn’t clash with any other elements. We fixed it. Next step - let’s make it better.

Creating a Composable

Let’s create a composable that will keep of the logic necessary to display the modal. This is a great way to make our code reusable.

Let’s create a composables folder in our project and create a new file called useModal.ts:

import { ref } from 'vue'

// keep track of component to render
const component = ref();
// keep track of whether to show modal
const show = ref(false);

export function useModal() {
    return {
        component,
        show,
        // methods to show/hide modal
        showModal: () => show.value = true,
        hideModal: () => show.value = false,
    }
}

This is a really simple composable which keeps track of two refs and returns two methods. We are keeping track of component in case in the feature we want to render different modals. 👀
show is keeping track of whether we show the modal or not and the two methods allow us to open and close the modal.

Now, let’s go back to App.vue:

<script setup lang="ts">
// import the composable
import { useModal } from './composables/useModal';
// use this to parse the component
import { markRaw } from 'vue';
import ModalConfirm from './components/ModalConfirm.vue';

// initialize modal
const modal = useModal();

// set the modal component to the ModalConfirm component and open the modal
const openConfirm = () => {
  modal.component.value = markRaw(ModalConfirm);
  modal.showModal();
};
</script>

<template>
      <div class="flex justify-center items-center min-h-screen">
        <Teleport to="#modal">
            <ModalConfirm v-if="modal.show.value" @close="modal.hideModal"/>
        </Teleport>
        <button @click="openConfirm">Open Confirm Modal</button>
      </div>
      <div class="absolute top-20 bg-red-500 p-2 w-full left-0">This will make things ugly</div>
</template>

<style scoped>
</style>

We use the new composable to switch our logic and then replace all occurences to use the data from the modal composable. We use the openConfirm method to assign the ModalConfirm component to the modal. In order to do this we use the markRaw helper. Read more.
If we test it now, it should still be working the same, but our logic will be extracted to this composable and will be ready to be reused.

Adding Dynamic Component

Okay, so we have our ModalConfirm component. But what if we have more than one modal, maybe we want to dynamically display different modals based on our use case. Remember, we added component in our useModal composable? We can use this together with Vue’s Dynamic Component feature to display different modals.

Let’s start by creating our second modal. It will be very similar to the first one. We will just use for the purposes of this tutorial. Let’s create ModalOverview.vue:

<template>
    <div
      class="absolute inset-0 bg-black bg-opacity-50"
    >
      <div
        class="flex items-start justify-center min-h-screen mt-24 text-center"
      >
        <div
          class="bg-white text-black rounded-lg text-center shadow-xl p-6 w-64"
          role="dialog"
          aria-modal="true"
        >
          <h2 class="text-lg font-bold">Overview of items:</h2>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </ul>
          <div class="flex justify-center py-4 text-white">
              <button @click="$emit('close')">Close</button>
          </div>
        </div>
      </div>
    </div>
</template>

As you can see it is very similar to the first one with minor differences.

Now that we have our second modal, let’s go back to App.vue:

<script setup lang="ts">
import { useModal } from './composables/useModal';
import { markRaw } from 'vue';
import ModalConfirm from './components/ModalConfirm.vue';
import ModalOverview from './components/ModalOverview.vue';

const modal = useModal();

const openConfirm = () => {
  modal.component.value = markRaw(ModalConfirm);
  modal.showModal();
};

const openOverview = () => {
  modal.component.value = markRaw(ModalOverview);
  modal.showModal();
};
</script>

<template>
      <div class="flex justify-center items-center min-h-screen">
        <Teleport to="#modal">
            <!-- Dynamic Vue Component based on our useModal component value -->
            <component :is="modal.component.value" v-if="modal.show.value" @close="modal.hideModal"/>
        </Teleport>
        <button @click="openConfirm">Open Confirm Modal</button>
        <span class="mx-4"></span>
        <button @click="openOverview">Open Overview Modal</button>
      </div>
      <div class="absolute top-20 bg-red-500 p-2 w-full left-0">This will make things ugly</div>
</template>

<style scoped>
</style>

As you can see, we import the ModalOverview component and add a second button that will assign it to the composable and open the modal. The most important part is we use <component :is=""> which is a Vue dynamic component. The is prop accepts either the name of the component we want to render or the component itself. In our case we set it to use the component from our useModal composable. The second modal should look like this now:

Adding Transition

Lastly, on our task list is to add a transition so that the modal appears nicely animated on the screen. We can use yet another Vue 3 component - <Transition>:

In App.vue:

<script setup lang="ts">
import { useModal } from './composables/useModal';
import { markRaw } from 'vue';
import ModalConfirm from './components/ModalConfirm.vue';
import ModalOverview from './components/ModalOverview.vue';

const modal = useModal();

const openConfirm = () => {
  modal.component.value = markRaw(ModalConfirm);
  modal.showModal();
};

const openOverview = () => {
  modal.component.value = markRaw(ModalOverview);
  modal.showModal();
};

</script>

<template>
      <div class="flex justify-center items-center min-h-screen">
        <Teleport to="#modal">
          <Transition>
            <component :is="modal.component.value" v-if="modal.show.value" @close="modal.hideModal"/>
          </Transition>
        </Teleport>
        <button @click="openConfirm">Open Confirm Modal</button>
        <span class="mx-4"></span>
        <button @click="openOverview">Open Overview Modal</button>
      </div>
      <div class="absolute top-20 bg-red-500 p-2 w-full left-0">This will make things ugly</div>
</template>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

We also need to add a few CSS classes in our <style>. Below you will find a diagram explaining these styles:

With that done, the modal is now complete. 🎉

Conclusion

During this tutorial, we managed to learn more about the Vue Teleport component, as well as the Vue Transition component. We used best practices and managed to extract some of our logic into a Composable. Lastly, we also learned about Vue Dynamic components, enabling us to render multiple types of modals.

Useful Resources

Twitter

YouTube

Build a blog with Nuxt 3 + Storyblok

Alexander Gekov — Mon, 20 Feb 2023 09:05:00 +0000

Introduction

In this article we will be building our very own blog using the help of Nuxt 3 and the Storyblok module.

You can follow along here:

What is Storyblok?

Storyblok is a headless content management system or CMS for short. A headless CMS provides flexibility because it only handles the content and is responsible for storing and sending it via APIs as opposed to a traditional CMS like Wordpress, Drupal, etc. which handle content but also provide their own frontend without the choice of alternatives. With headless CMS your content can be displayed on mobile and web with no limitation as to which technologies you chose for visualization.

What differentiates Storyblok from other headless CMS is its intuitive visual editor and freedom when it comes to creating your own “bloks”. You can build your custom components and then reuse them or rearrange then in the Storyblok editor. This is especially useful for websites that need to constantly change their data.

Lastly, Storyblok has a great free-tier so anyone can try it out now. Moreover, it has great integrations with tools such as Nuxt to make the whole developer experience even more pleasant.

Let’s get right into it.

This is what we are going to build

We are going to build a simple blog where we can showcase our articles. It will look something like the image below.

Prerequisites

Storyblok account
Netlify account
Node.js (LTS)
Nuxt 3

Creating Storyblok space

Once you have your Storyblok account you can go ahead and create a new space.

When you have created your space you can go to Settings and then Access Tokens.

Copy your Token since we are going to need it in the next steps.

Storyblok’s Visual Editor

If you go to the Content tab on the left, you will see that Storyblok has given us a sample Home page.

And if you click on Home you will be greeted by the Visual Editor:

Now in order to view our Nuxt App we need to change the default environment URL. We can do that by going to Settings > Visual Editor and setting the Location to https://localhost:3010/.

Since Storyblok needs the url to be in https you can follow one of these tutorials to serve your Nuxt App through a proxy:

Mac/Linux: https://www.storyblok.com/faq/setup-dev-server-https-proxy
Windows: https://www.storyblok.com/faq/setup-dev-server-https-windows

If you go back to the Visual Editor, we won’t be able to see our app just yet, the last step is to go to Entry configuration and set the Real path to “/”. Then you will be able to see your locally running app.

Installation

In a newly scaffolded Nuxt 3 project, let’s run the following command:

npm install @storyblok/nuxt

Let’s also add storyblok to our nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules:[
        ["@storyblok/nuxt", { accessToken: "<your-access-token>" }]
    ]
})

Remember the access token we copied from Storyblok, paste it instead of the placeholder.

Feel free to install dotenv npm i dotenv and put the access token in your .env file.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [
        ["@storyblok/nuxt", { accessToken: process.env.STORYBLOK_TOKEN }]
    ]
})

Adding Tailwind

We are going to use Tailwind to style our components. Luckily, there’s a Nuxt module that we can use.

npm install --save-dev @nuxtjs/tailwindcss

And let’s also add it in our nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [
        ["@storyblok/nuxt", { accessToken: process.env.STORYBLOK_TOKEN }],
        '@nuxtjs/tailwindcss'
    ]
})

And that’s it! We can now use Tailwind in our app. If it doesn’t work, try creating a tailwind.config.js file with the following code:

module.exports = {
    content: [
        './storyblok/**/*.{html,js,ts,vue}'
    ]
}

Creating the main components

When creating a new space, Storyblok automatically creates four default components for us:

Page
Grid
Feature
Teaser

All of these you can find in the Components section of our space.

Remember, Storyblok handles the content, but not the visualization. That means, we now have to create the Vue components which will correspond to the Storyblok components.

Let’s start by creating ~/storyblok folder in our project. This folder will be auto-detected by the Storyblok module we installed.

Now let’s proceed by creating the four files:

storyblok/Page.vue:

<template>
  <div v-editable="blok">
    <StoryblokComponent
      v-for="blok in blok.body"
      :key="blok._uid"
      :blok="blok"
    />
  </div>
</template>

<script setup>
defineProps({ blok: Object })
</script>

storyblok/Grid.vue:

<template>
  <div
    v-editable="blok"
    class="container mx-auto grid grid-cols-3 gap-12 place-items-center py-16"
  >
    <StoryblokComponent
      v-for="blok in blok.columns"
      :key="blok._uid"
      :blok="blok"
    />
  </div>
</template>

<script setup>
defineProps({ blok: Object })
</script>

storyblok/Feature.vue:

<template>
  <div v-editable="blok">
    <h1 class="text-xl">{{ blok.name }}</h1>
  </div>
</template>

<script setup>
defineProps({ blok: Object })
</script>

storyblok/Teaser.vue:

<template>
  <div v-editable="blok" class="py-16 text-5xl font-bold text-center">
    {{ blok.headline }}
  </div>
</template>

<script setup>
defineProps({ blok: Object })
</script>

For each of the components we use the v-editable directive passing the blok element the component receives. The blok element is the actual blok data coming from Storyblok's Content Delivery API. We also use the <StoryblokComponent :blok="blok" /> which is available globally in our Nuxt app. Next step is to change the app.vue so we can actually see the Storyblok components on-screen.

Change app.vue

Let’s change app.vue like this:

<template>
    <NuxtLayout>
    <NuxtPage/>
    </NuxtLayout>
</template>

And now we can create ~/pages folder and create index.vue file there.

<template>
    <StoryblokComponent v-if="story" :blok="story.content" />
</template>

<script setup>
    const story = await useAsyncStoryblok("home", { version: "draft" });
</script>

useAsyncStoryblok is short-hand equivalent to using useStoryblokApi inside useAsyncData and useStoryblokBridge functions separately. Essentially it is our way to communicate with the Storyblok API by fetching the content for the specified page - in our case “home”.

Once done, we should be able to see this: (I took the liberty of adding a simple navigation bar, you can find it in the source code linked above)

Creating dynamic content pages

Currently we have ~/pages/index.vue corresponding to the / route. However, we want to be able to create pages directly from Storyblok. We can do this by deleting the index.vue and creating a Vue component named [...slug].vue. It will get the slug from the URL and see if we have such a page in Storyblok otherwise return our home page.

<script setup>
const { slug } = useRoute().params;

const story = await useAsyncStoryblok(
  slug && slug.length > 0 ? slug.join('/') : 'home',
  { version: 'draft' }
);
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

Creating new stories (pages)

Now if we go back to Storyblok and create a new page, let’s say “About”, we can fill it with other blocks and see the updated page in Nuxt.

We can add new pages and organize them any way we want. Once ready we just click Save and everything is updated live. How awesome is that! Next up we are going to start creating our blog and adding custom components to our arsenal.

Creating Article in Storyblok

We will need to create some custom components for our blog such as Article and ArticleCard.

Let’s go to Storyblok and create a new block in our block library. We name it article and give it:

image
title
description
content
and author.

Once you have done that, you can also create a Blog folder to keep everything organized and in one place:

Now you can create pages for new blog posts and they will be of type Article.

Let’s create a new example article and fill in the fields we defined earlier.

Creating All Articles in Storyblok

Let’s now create a nested component that will show all articles when the user visits /blog.

In Storyblok let’s create a new component all-articles. It only needs a headline field.

Creating the Article component in Vue

Let’s create Article.vue in ~/storyblok:

<template>
    <div v-editable="blok">
      <img
        :src="blok.image.filename + '/m/1600x0'"
        :alt="blok.image.alt"
        class="mx-auto w-3/4 object-cover"
      />
      <div class="container mx-auto mb-12">
        <h1 class="text-6xl text-gray-800 font-bold mt-12 mb-4">{{ blok.title }}</h1>
        <h2 class="text-2xl text-gray-500 font-bold mb-4">
          {{ blok.description }}
        </h2>
        <div class="text-gray-600 mb-3">Written by: <b>{{ blok.author }}</b></div>
        <div v-html="resolvedRichText"></div>
      </div>
    </div>
  </template>

  <script setup>
  const props = defineProps({ blok: Object });

  const resolvedRichText = computed(() => renderRichText(props.blok.content));
  </script>

As you can see we use the v-editable directive and the blok prop. What’s new is we optimize the image using Storybloks Image service and we use the v-html directive and renderRichText() to render what is resolved from the rich text content field.

Now if we go to the example blog post it should look something like this:

Creating the All Articles and Article Card Components

Let’s create ArticleCard.vue in ~/components:

<template>
    <NuxtLink
      :to="'/' + slug"
      v-editable="article"
      class="w-full h-full border rounded-[5px] text-left overflow-hidden"
    >
      <img
        :src="article.image.filename + '/m/600x0'"
        :alt="article.image.alt"
        class="w-full h-48 xl:h-72 object-cover pointer-events-none"
      />
      <div class="p-4">
        <h2 class="text-2xl text-[#1d243d] font-bold mb-1">
          {{ article.title }}
        </h2>
        <div class="text-gray-600 mb-3">{{ article.author }}</div>
        <div class="line-clamp-4">
          {{ article.description }}
        </div>
      </div>
    </NuxtLink>
  </template>

  <script setup>
  defineProps({ article: Object, slug: String });
  </script>

In this file, we use <NuxtLink> to navigate to the corresponding article page. We display all necessary information we get from the article prop.

Now let’s create AllArticles.vue in ~/storyblok:

<template>
    <div class="py-24">
      <h2 class="text-6xl text-gray-800 font-bold text-center mb-12">{{ blok.headline }}</h2>
      <div class="container mx-auto grid md:grid-cols-3 gap-12 my-12 place-items-start">
        <ArticleCard
          v-for="article in articles"
          :key="article.uuid"
          :article="article.content"
          :slug="article.full_slug"
        />
      </div>
    </div>
  </template>

  <script setup>
  defineProps({ blok: Object });

  const articles = ref(null);
  const storyblokApi = useStoryblokApi();
  const { data } = await storyblokApi.get('cdn/stories', {
    version: 'draft',
    starts_with: 'blog',
    is_startpage: false,
  });
  articles.value = data.stories;
  </script>

Here we use the Storyblok API hook useStoryblokApi() and use it to fetch all stories, filtering them by our blog folder and making sure we don’t take the blog/ route. We then loop over the articles displaying them in our <ArticleCard> component.

Deploying to Netlify

Now it’s time to deploy our Nuxt app to Netlify. Netlify is a web platform that includes build, deploy, and serverless backend services for web applications and dynamic websites. It will make it easy for us to deploy our blog in a few simple steps:

Push your code to GitHub and remember to not push any secret keys
Go to Netlify and select “Add new site” and Import an existing project

Import your project from GitHub and set build command to: npm run generate
Set up environment variables:

And you’re done. Now you should be able to visit your live website as soon as the build is deployed. (might need to refresh)

Last steps

Make sure you change the URL in Storyblok’s Visual Editor so you see the live version.
Let’s make sure to display drafts only in preview mode, otherwise display only published content. We can do this by looking at the URL query if it contains _storyblok.

In [...slug].vue and AllArticles.vue:

version: useRoute().query._storyblok ? 'draft' : 'published'

Let’s setup Webhooks, so that once we create new content the site is redeployed automatically:
- In Netlify go to Site Settings > Build & deploy and go to Build Hooks.
- Create a new hook called Storyblok and copy the unique URL:

- Go to Storyblok’s settings and find Webhooks. Under the field “Story published & unpublished” paste the copied URL. Now everytime a story is published or unpublished the deploy will trigger.

🎉. Now you are officially done! Congrats!

Useful Resources

https://www.storyblok.com/tutorials

https://nuxt.com/modules/storyblok

https://vueschool.io/courses/jamstack-the-complete-guide

https://www.netlify.com/

💚 I hope this tutorial will be useful to you. The guys at Storyblok have made it super easy for developers and non-developers to manage content. Go ahead and give it a try. Make sure to also follow me on my socials for more Vue content.

Twitter

YouTube

First look at Nuxt DevTools

Alexander Gekov — Sun, 12 Feb 2023 23:21:32 +0000

Introduction

In this article we will go through the main features of Nuxt DevTools which was unveiled a couple of days ago. We will be enabling it on the Nuxt Movie App project which we did in the last article.

Follow along here:

Vue.js Amsterdam

Image by Twitter user @jecfish

The Vue.js Amsterdam conference was held this week and it was a great success, with developers from all over the world gathering to learn about the latest developments in the Vue.js framework. One of the highlights of the conference was the reveal of Nuxt DevTools, a new tool aimed at improving the developer experience in Nuxt. It was demonstrated by the incredible @antfu who is one of the main contributors in GitHub.

Features

The new Nuxt DevTools offers a set of visual tools available right inside your app.

Overview

Once you open the DevTools you are presented by an overview of your app. Here you can find your version of Nuxt, as well as how many pages, components, imports, modules and plugins your app is using. You can also find some useful links such as the Ideas and Suggestions link to GitHub where you can suggest new things. There is also the project roadmap and a way to report bugs.

For now DevTools appears as a small ribbon on the bottom of your screen. But you can also toggle it to be on the left, right or on the top. Nuxt DevTools is also extensible but more on that later.

Pages

In the pages tab you can see all of the routes you have in your app. You can use the search bar to see if a URL matches accordingly to your routes and press enter to navigate to it. What is more, you can click on the little icon next to the route to open the corresponding Vue file in VS Code.

Components

The Components tab in Nuxt DevTools provides a comprehensive view of all the components present in your app, including those created by the user, registered at runtime, from Nuxt, or from third-party libraries.

The tab allows you to search for components, go to their source files in your editor, view a graph of how components interact with each other.

One last thing, you can also inspect the DOM tree and see which elements are being rendered by which components.

The Components tab helps you to better understand your app and its structure, making it easier to debug and optimize.

Imports

The Imports tab will show a list of all auto-imports registered to Nuxt. You can see in which files they are used. There can be also short descriptions or links to documentation.

Modules

In this tab you can see all the modules that you have installed and information about them.

💡 The team behind Nuxt DevTools has said that it plans for users to be able to have one-click installation of modules right through the app.

App Config

In the App Config tab, you are presented with information from your Public as well as you Private Runtime configurations. Moreover, you can also edit or add variables straight from this tab:

Payload

In the Payload tab, you can monitor the current State and Data. This makes it easy to know exactly what you get from each API request or locally stored Data.

Hooks

The Hooks tab gives you an overview of all hooks and lifecycles in order. This tab can be very useful for testing performance and monitoring at which point is your app behaving slow and where is the bottleneck.

Custom Tabs

As I mentioned earlier there is the possibility for Module authors to extend DevTools with their own custom tabs. In the image above you can see how VueUse have integrated their docs into Nuxt DevTools. There is also the UnoCSS style inspector or the Vitest integration to run tests directly from DevTools. The possibilities are endless.

The current implementation relies on embedding your own-hosted page via an iframe. This is not the best experience, but I believe it is a matter of time the amazing team behind Nuxt DevTools creates a better approach for extensibility.

Installation

In oder to enable Nuxt DevTools we need some prerequisites.

First of all, we need to have Nuxt version 3.1.0 or higher.
Make sure to use Node version 16 or higher, as I initially tested with Node 14 and experienced some issues.

In the official GitHub documentation there are two ways to enable DevTools.

Using the opt-in per-project command from your project root.

npx nuxi@latest devtools enable

Installing it manually as a module.

npm i -D @nuxt/devtools

And let’s not forget to add it to the nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools',
  ],
})

I personally recommend using the second approach, as there were some issues for me trying to use the opt-in method.

Once that is done, restart your dev server and you will be able to see the Nuxt DevTools peeping at the bottom of your screen.

That is all, you can now explore the DevTools in your own applications. Below you can find links for the information that inspired this article.

Useful Resources

Nuxt DevTool Github

Development Experience with Nuxt by Anthony Fu

Nuxt Docs

💚 I hope you are excited for the future of Vue and Frontend as I am. In the next article we will be looking at Nuxt Content and how to use it to create our own blog. Make sure to follow me so you don’t miss out. - Alex

Twitter

YouTube

Introduction to Nuxt 3: Part 2

Alexander Gekov — Mon, 30 Jan 2023 12:07:34 +0000

Introduction

In this second part of “Introduction to Nuxt 3” we are going to build a Movie app where we can query the “The Movies Database” API.

You can also watch my YouTube video:

The code is available here.

Overview of App

We are going to build an application where we can search for a movie, fetch different results based on the query and then view more details about the movie in a separate page. We are going to use some of the concepts and features mentioned in Part 1.

Nuxt 3

The first step will be to generate a new Nuxt project:

npx nuxi init nuxt-movies-app

Make sure to cd nuxt-movies-app and do npm install.

The command will generate the starting code for a Nuxt 3 project. The folder structure should be like this:

Now if you run npm run dev you should be able to go to https://localhost:3000 and see the default Nuxt Welcome Page.

Windi CSS

Windi CSS is the framework we are going to use for styling our app. Windi CSS is a utility-first CSS framework. It is very similar to Tailwind and can be regarded as an on-demand alternative to Tailwind Css.

Some of the benefits of using Windi CSS are the faster load times, full compatibility with Tailwind 2.0 classes, and many more. It also has integrations with Vite, Webpack, Nuxt, Vue CLI, etc.

Let’s install it with the following command.

npm i nuxt-windicss -D

Next, we need to update our nuxt.config.ts with the following:

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    'nuxt-windicss',
  ],
})

Great, we have Windi CSS now installed.

💡 Much like Tailwind, Windi CSS also has a config file. Valid filenames that Windi can automatically pick up are: windi.config.ts, windi.config.js, tailwind.config.ts and tailwind.config.js.

Example Windi Config:

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  /* configurations... */
})

Replacing the default component

In the app.vue let’s replace the default <NuxtWelcome> component with something else like this:

<template>
  <div>
    Hello World
  </div>
</template>

Layouts directory

The Nuxt app comes by default pretty bare bones. We can create the “magic” folders only if we need to. One of these magic folders is the layouts one. Nuxt provides a customizable layout system so that you can reuse it for multiple pages in your app.

Start by creating a layouts/ folder.
To enable the default layout create a ~/layouts/default.vue file.

We will use this layout to place our Navigation Bar there.

<template>
    <nav class="flex justify-center mt-10">
        <NuxtLink class="px-4 py-2 border rounded-lg " to="/">Home</NuxtLink>
    </nav>
    <main>
        <slot />
    </main>
</template>

We use the built-in NuxtLink component to create a link to our / route.
We are using Vue slots to place the content of the page right where the slot is.

⚠️ We have one problem though, the / route still points to our app.vue file. That is because we haven’t created our ~/pages/ directory yet. Let’s create it.

Pages directory

Nuxt is smart enough to not include Vue Router if we don’t have a pages directory in our project. Let’s create it now:

Start by creating a pages/ folder.
Create ~/pages/index.vue - this will correspond to the / route.

We can also create a dynamic route for our movie details. The url we would like to create is this “nuxt-movies.com/movies/{id}” where {id} is a dynamic value based on the movie’s id.

Start by creating a /movies folder under /pages.
In the /movies folder create a file named [id].vue.

Notice how the id is wrapped in square brackets. This means that it is dynamic and the route will have a param id.

Changing app.vue

The last thing we need to do to make our routing work is to change our ~/app.vue file. Currently it looks like this:

<template>
  <div>
    Hello World
  </div>
</template>

Let’s change it to this:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<NuxtLayout> tells Nuxt to use our default layout and the <NuxtPage> component tells Nuxt that we want to use the ~/pages system.

Lastly, for the changes to take place we need to restart our dev server.

Server directory and catch-all route

Let’s create an endpoint that will communicate with TMDB API and expose it to our frontend.

As with the other magic folders we start by creating a /server directory in our project root. Now let’s create /api directory and inside that create /movies directory where we need two files: search.js and [...].js.

The second one is called a Catch-all route, since it doesn’t have a name it will catch all routes that couldn’t be matched with an existing file in /server/api/movies.

We will make the catch-all route to get a movie by id. Using the event we can get the url and split it by / so that the id will be the last element of the array.

💡 We don’t really need to use a catch-all route, but I am just showing it because in certain scenarious it can be useful.

export default defineEventHandler((event) => {
    const id = [...event.node.req.url.split("/")].pop();
    const config = useRuntimeConfig();
    return $fetch(`${config.apiBaseUrl}/movie/${id}`, {
        headers: {
            "Authorization": `Bearer ${config.apiKey}`
        }
    })
})

And for the search.js we will use the following code:

export default defineEventHandler((event) => {
    const {query} = getQuery(event);
    const config = useRuntimeConfig();
    return $fetch(`${config.apiBaseUrl}/search/movie?query=${query}`, {
        method: "GET",
        headers: {
            "Authorization": `Bearer ${config.apiKey}`
        }
    })
})

In the above snippet we make use of getQuery() to get the query from the event and then pass that to the API so we can search by that query.

Since the TMDB API requires authorization we set the header in both files to include our token. But instead of simply pasting it in the code, we can use the useRuntimeConfig() hook to get it from our environment variables.

We should now go to nuxt.config.ts and add this runtimeConfig:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [
    'nuxt-windicss',
  ],
  runtimeConfig: {
    apiKey: '',
        apiBaseUrl: '',
  }
})

As you can see we set the apiKey and apiBaseUrl to be an empty string, that is fine because Nuxt is smart enough to look at the environment to see if we have provided a value and then actually set it for the whole app. Since the config is a file tracked by git, we should keep our secrets in an .env file.

Adding .env

In order to have local environment working, we need to install the dotenv npm package.

npm install dotenv

Now we can go to our project root and create a .env file. Make sure to add it to .gitignore if it isn’t added automatically.

In the .env paste the following line:

NUXT_API_KEY=<YOUR_TMDB_TOKEN>
NUXT_API_BASE_URL=https://api.themoviedb.org/3

The name of the environment variable matters so Nuxt can detect it. We add the “NUXT” prefix and then separate the camelCase variable by undercase. So apiKey becomes API_KEY.

Adding types

Before we proceed with designing our main page, let’s create some types so that we know what kind of response we can expect from our API.

Let’s create a /types folder in the root of our project. Now create an ApiResponse.ts and a Movie.ts file.

The API response file should be something like this. It contains information such as the results, current page, total number of results and total number of pages:

export type APIResponse = {
    page: number;
    results: Movie[];
    total_pages: number;
    total_results: number;
}

And also paste the following in Movie.ts:

export type Movie = {
    id: number;
    title: string;
    genres: {
      id: number;
      name: string
    }[];
    release_date: string;
    runtime: number | null;
    overview: string;
    poster_path: string;
}

Designing the home page

Currently, our home page (~/pages/index.vue) only contains the default layout and a <div>Home Page</div>. We want to have a search bar and once we type something we want movies to appear below.

Let’s jump into it:

<template>
    <div class="flex flex-col py-10">
        <div>
            <h2 class="text-2xl font-bold text-center">Nuxt Movies App</h2>
        </div>
        <div class="flex justify-center items-center h-32">
            <input v-model="searchTerm" placeholder="Search" type="text" class="px-2 py-1 border border-gray-800 rounded-md min-w-64">
        </div>
        {{ searchTerm  }}
    </div> 
</template>

<script setup lang="ts">
const searchTerm = ref('');
</script>

In the snippet above we add a simple heading as well as an <input> for our Search bar. We center everything and style it with the help of Windi CSS.

We use the script setup syntax and also use the auto-imports feature to import ref and bind our searchTerm variable with the value of the input field.

Let’s now fetch some data and display it.

<template>
    <div class="flex flex-col py-10">
        <div>
            <h2 class="text-2xl font-bold text-center">Nuxt Movies App</h2>
        </div>
        <div class="flex justify-center items-center h-32">
            <input v-model="searchTerm" placeholder="Search" type="text" class="px-2 py-1 border border-gray-800 rounded-md min-w-64">
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 self-center gap-x-10 gap-y-10 mb-10">
            <div v-for="movie in data?.results">
                {{ movie.title }}
            </div>
        </div>
    </div> 
</template>

<script setup lang="ts">
import { ApiResponse } from '~/types/ApiResponse';

const searchTerm = ref('');

const url = computed(() => {
    return `api/movies/search?query=${searchTerm.value}`;
});

const { data } = await useFetch<ApiResponse>(url)
</script>

As you can see, we use yet another useful Nuxt composable - useFetch(). It exposes some fields like data, error, pending, etc. We import our ApiResponse type so that we get proper typing. Lastly, we make the url be computed, so that everytime it changes, the useFetch will execute and refresh our data. In the template we display the movie titles in a grid using the v-for directive from Vue.

Creating the Movie Card component

Let’s go to our project root and create another magical folder - ~/components. This folder usually contains our components. They can be smaller sections of our website, that do not fall under the category of a full page. Let’s create a file named MovieCard.vue:

<template>
    <div class="h-128 w-64 border flex flex-col text-center ">
        <div class="mb-5 bg-green-600 inline-block">
            <img class="transform hover:translate-x-6 hover:-translate-y-6 delay-50 duration-100 inline-block" :src="imgURL" alt="Movie Poster">
        </div>
        <div class="text-lg">
            {{ movie.title }}
        </div>
        <p class="text-m text-gray-500 break-words text-wrap truncate overflow-hidden px-2">
            {{ movie.overview }}
        </p>
    </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
import { Movie } from '~/types/Movie';

const props = defineProps({
    movie: {
        type: Object as PropType<Movie>,
        required: true
    }
})

const config = useRuntimeConfig();
const imgURL = computed(() => props.movie.poster_path != null ? `${config.public.imgBaseUrl}/${props.movie.poster_path}` : 'https://via.placeholder.com/300x500');

</script>

In the template we are showing the movie image, the title and the description.
In the script we use defineProps() to specify that a movie prop will be passed to our component.
We import also our Movie type from ~/types/Movie.ts.
Lastly we use the useRuntimeConfig composable to get the imgBaseUrl. This is necessary because the TMDB Api uses a different route for assets.

But we don’t have the imgBaseUrl in our config, let’s add it now:

Update you nuxt.config.ts like this:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [
    'nuxt-windicss',
  ],
  runtimeConfig: {
    apiKey: '',
    apiBaseUrl: '',
    // We use the public runtime config in 
    //order to expose this also to the client side
    public: {
        imgBaseUrl: '',
    }
  }
})

Finally, update the .env with the image base URL: (Make sure to include NUXT_PUBLIC prefix)

NUXT_API_KEY=<YOUR_TMDB_TOKEN>
NUXT_API_BASE_URL=http://api.themoviedb.org/3
NUXT_PUBLIC_IMG_BASE_URL=http://image.tmdb.org/t/p/w500

Let’s restart our dev server and we should end up with this:

Great! Now let’s make some optimisations and finish our app!

Adding debounce to search

If you open the Network tab in DevTools by pressing F12 and you start typing in our search box you will see we are making requests for every single letter we add or remove from the search promt. This is not optimal because it makes our server process all of the otherwise unnecessary requests.

We can fix this by giving our search bar a short debounce time. For that we can use one of the best Vue Composables libraries - VueUse.

npm i @vueuse/nuxt

And then update our nuxt.config.ts file by adding VueUse to our modules:

export default defineNuxtConfig({
    modules: [
    'nuxt-windicss',
    '@vueuse/nuxt'
  ],
  runtimeConfig: {
    ...
  }
})

Then in our index.vue file:

<template>
    ...
</template>

<script setup lang="ts">
import { ApiResponse } from '~~/types/ApiResponse';

const searchTerm = ref('');

// Create a debounced version of searchTerm
const debouncedSearchTerm = refDebounced(searchTerm, 700);

// replace the url with the debounced version
const url = computed(() => {
    return `api/movies/search?query=${debouncedSearchTerm.value}`;
});

const { data } = await useFetch<ApiResponse>(url)

</script>

VueUse has a great composable refDebounced that we can use on our searchTerm to give the user a bit of time to finish his query and then actually proceed with calling the API.

Make sure to also change the url computed property to use the debouncedSearchTerm.

Much better!

Adding some pagination

Another thing that we might want to add is a “Load more” button. Currently the TMDB API returns the first page of results. We can implement the button by having a local variable corresponding to the page and appending new results from the API to the current list.

Let’s start by updating our index.vue page:

<template>
    <div class="flex flex-col py-10">
        <div>
            <h2 class="text-2xl font-bold text-center">Nuxt Movies App</h2>
        </div>
        <div class="flex justify-center items-center h-32">
            <input v-model="searchTerm" placeholder="Search" type="text" class="px-2 py-1 border border-gray-800 rounded-md min-w-64">
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 self-center gap-x-10 gap-y-10 mb-10">
            <MovieCard :movie="movie" v-for="movie in data?.results" :key="movie.id"/>
        </div>
        <div v-if="data?.results.length" class="flex justify-center">
            <button v-if="!disabledPrevious" @click="page--" class="px-4 py-2 text-m border rounded-lg">Previous</button>
            <div class="px-4 py-2 text-m border rounded-lg">{{ page }}</div>
            <button v-if="!disabledNext" @click="page++" class="px-4 py-2 text-m border rounded-lg">Next</button>
        </div>
    </div> 
</template>

<script setup lang="ts">
import { ApiResponse } from '~/types/ApiResponse';

const searchTerm = ref('');

const page = ref(1);

// Disable pagination depending on first or last page
const disabledPrevious = computed(() => {
    return page.value === 1;
})
const disabledNext = computed(() => {
    return page.value + 1 === data.value?.total_pages;
})

// Create a debounced version of searchTerm
const debouncedSearchTerm = refDebounced(searchTerm, 700);

// replace the url with the debounced version
const url = computed(() => {
    return `api/movies/search?query=${debouncedSearchTerm.value}&page=${page.value}`;
});

const { data } = await useFetch<ApiResponse>(url)
</script>

A couple of things are happening here:

We added some buttons to act as pagination and they are only visible if there are results.
We created page which is a ref variable that holds our current page.
We created two variables to disable our Previous button if it’s the first page and to disable our Next button if we are on the last page available.
Finally we changed our url to include also the page in the query.

In order for that last part to work, we also need to change our ~/server/api/movies/search.js file:

export default defineEventHandler((event) => {
    const {query, page} = getQuery(event);
    const config = useRuntimeConfig();
    return $fetch(`${config.apiBaseUrl}/search/movie?query=${query}&page=${page}&include_adult=false`, {
        method: "GET",
        headers: {
            "Authorization": `Bearer ${config.apiKey}`
        }
    })
})

I also added the includeAdult query and set it to false so that we don’t get any NSFW content.

We should be able to now type something in the search bar and load different pages of movies.

Designing the details page

Maybe we want to see more details about a specific movie. Let’s create a new page. It will have a dynamic route.

In the /pages directory create a new directory called /movies.
In that new directory create a file [id].vue.

The brackets mean that this route will be dynamic. So if we go to /movies/55 we will see the details page for a movie with an id of 55.

<template>
    <div class="flex flex-col px-20 mt-10">
        <div class="grid grid-cols-7 gap-1">
            <img class="col-span-2" :src="imgUrl" alt="Movie Poster">
            <div class="flex flex-col col-span-3">
                <div class="text-4xl font-sans font-bold mb-5">" {{ data?.title }} "</div>
                <div class="flex">
                    <div class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full mr-2 mb-2" v-for="genre in data?.genres">{{ genre.name }}</div>
                </div>
                <div class="text-lg my-2 ">Release Date: {{ data?.release_date }}</div>
                <div class="text-lg mb-2 ">Duration: {{ data?.runtime }} mins</div>
                <p class="text-gray-600 text-m">{{ data?.overview }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Movie } from '~/types/Movie';

const route = useRoute();
const config = useRuntimeConfig();
const movieId = computed(() => route.params.id);

const imgUrl = computed(() => data.value?.poster_path ? `${config.public.imgBaseUrl}/${data.value?.poster_path}` : 'https://via.placeholder.com/300x500');

const {data} = await useFetch<Movie>(`/api/movies/${movieId.value}`);

</script>

We display more information about the movie such as release_data, genres and runtime.
useRoute is another auto-imported Nuxt composable that let’s us access the route and get the id param.
useRuntimeConfig to get the imgBaseUrl again or since some movies don’t have an image we show a placeholder.
Similarly to index.vue we use useFetch to get the movie’s data.

Great so we have all this done and it’s looking awesome. One last thing we can optimise is that if we are in the details page and want to go back to the Home page, the state of our search is lost. Let’s fix that.

Preserving state when switching between routes

This chapter is a short one, don’t worry.

In order to preserve state between route changes we can use the keepalive attribute in our app.vue file.

<template>
  <NuxtLayout>
    <NuxtPage keepalive include="index" />
  </NuxtLayout>
</template>

By adding this Nuxt will autowrap your pages with the <keep-alive> Vue built-in component. You can specify pages in the include or you can disable it for pages with the exlude prop.

Congratulations

Congrats, you have made a fully functional Nuxt 3 app, utilizing some of the most important concepts and features of Nuxt and Vue.

Potential things that can be extended: Loading Spinners, Handling Errors.

Here are some useful resources that can come in handy:

💚 This was my first practical guide about Nuxt, I am going to be creating more Vue and Nuxt content, so if you liked this one please make sure to follow me. It means a lot!

Twitter

YouTube

Introduction to Nuxt 3: Part 1

Alexander Gekov — Thu, 26 Jan 2023 18:11:22 +0000

What is Nuxt and why you should use it?

Nuxt is what’s known as a “meta framework”. Basically it’s a framework built on top of another framework. Abstraction Inception. Nuxt is built on top of Vue.js and brings a lot of useful features that are not natively supported in Vue. It’s like upgrading from a Honda Civic to a Honda Civic Type R. The car is still essentially the same, but now you have a lot more power, better brakes and a lot more convenient features that bring the driving experience to the next level.

Okay, so what are these ultra-mega-cool features I am blabbing about and can’t you just use Vue? Well, Nuxt automatically sets up server-side rendering, has automatic code-splitting to improve performance, layout system and powerful file-based routing just to name a few.

So overall, Nuxt is like Vue but on steroids. It’s still Vue, but it’s a bit more opinionated and useful for large-scale production apps. Nevertheless, even if you have a small project on your hands you should definitely give Nuxt a try.

Getting started with Nuxt 3

Version 3 of Nuxt was announced in October of 2021 and the first official stable release of Nuxt 3 came in November 2022. It’s considered a modern rewrite utilizing Vite, Vue 3 and Nitro as well as first-class Typescript support.

Nuxt 3 Features

Auto imports

Part of the improved developer experience of Nuxt includes auto-imports. If you have ever worked on a large scale web app you probably have a long list of imports at the start of your script setup. Well, Nuxt makes it easy by having auto-imports for the following things:

Nuxt imports for fetching data (useAsyncData, $fetch, useNuxtApp, useRuntimeConfig, useState , etc.)
Vue imports (all imports coming from vue - ref, computed, onMounted , etc.)
Project directories (components/ , composables/ and utils/)

💡 You can also disable auto-imports by changing the setting in your nuxt.config.ts file.

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

File-based routing

Nuxt creates routes automatically by looking at your pages/ folder. If there aren’t any files in the directory, routing will not be used, but if there are each of them will correspond to a specific URL. For example, if we have the file pages/about.vue, Nuxt is smart enough to create a route at /about. We can also create a dynamic route by utilizing the square bracket notation - pages/cats/[id].vue.

Nuxt also provides a component to act as a link between pages and prevent full-page refreshes:

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/cats/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/cats/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

💡 In pages where a NuxtLink is used, Nuxt will prefetch components in order to make navigation between routes faster.

You can learn more about Routing in Nuxt here:
Routing

CSR & SSR & SSG

Modern frontend development has many approaches to rendering, but the most used ones are CSR (Client-side rendering), SSR (Server-side rendering) and also SSG (Static site generation).

Client-side rendering renders an app in the browser using JavaScript and generally uses the DOM. CSR is good for Single Page Applications (SPAs) where there is a lot of interactivity involved, however the main drawback is that the size of the JavaScript bundle is ever increasing and performance can suffer as the app grows larger.

Server-side rendering generates the HTML template on the server and once that is loaded it can add interactivity using JavaScript. SSR improves page performance, and leads to increased SEO (search engine optimisation) because bots can actually read the HTML that is being served. One of the cons of SSR is that it can tank up costs rather quick and that transitions between routes can take longer. SSR is mostly used for Content-based websites such as blogs or e-commerce.

Lastly there is the Static site generation. The main difference is that it happens at build time - HTML file is generated for each page and JS (optional) and CSS is bundled and shipped together. Since it’s static if you want to make changes, you will need to build the project again and then deploy the output files. The benefits of this approach are that there is minimal if any JavaScript and you don’t need a server. You can host your website on any static hosting service such as Netlify, Vercel, GitHub Pages, etc. SSG is mostly used for marketing pages, which are not expected to change often.

Ok, so what about Nuxt?

So Nuxt has this thing called Universal Rendering and that essentially utilizes SSR to fetch the initial HTML and then uses Vue.js to add missing interactivity and take over the control of the page. The second step is what’s called Hydration.

You can use different types of rendering for different routes by setting routeRules in your nuxt.config.ts:

export default defineNuxtConfig({
  routeRules: {
    // Static page generated on-demand once
    '/articles/**': { static: true },
    // Render these routes with SPA
    '/admin/**': { ssr: false }
  }
})

You can set a component to be rendered client-side by using the <ClientOnly> wrapper component or by adding the “.client” suffix to the name of the component like this: Comment.client.vue.

Module system

Nuxt has a very powerful module system. You can think of modules as plugins for Nuxt, they add functionality on top of the framework and often make integrations with other tools more seamless and easier.

To add a module to your Nuxt app you have to first install it. E.g npm install @nuxt/content. Then you can add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    // Using package name (recommended usage)
    '@nuxtjs/example'
  ]
})

Have a look at all of Nuxt’s modules here:

Modules

Typescript support

Lastly, Nuxt 3 is fully-typed and also preserves types when using auto-imports. This is all great, because once you go TypeScript you never go back.

Moreover, Nuxt has auto-generated types based on the modules we have installed and auto-complete just works out-of-the-box.

💡 Don’t be like this ⬆️

Recap

Nuxt is a framework built on top of Vue.js. It has commonly used features already baked in and is a great tool to build structured Vue web apps.

Open the terminal and try out Nuxt yourself!

npx nuxi init <your-super-cool-new-project-name>

🚨 In Part 2 we will utilize the OMDB (Open Movies Database) API to create our own Nuxt app and showcase some of the features outlined in this first part.

If you have liked this short introduction to Nuxt be sure to share what topic would you like to hear about next and follow me on my socials:

Twitter

YouTube

Life Simulator dApp using Thirdweb

Alexander Gekov — Wed, 18 Jan 2023 00:24:07 +0000

Preface

This article is my final project for the course on Bitcoin and Blockchain, taught at the Prague University of Economics.

Life Simulator dApp

We are going to make a life simulator game using smart contracts and the web3 stack. I will be trying to walk you through the process and explain everything for beginners but be aware it would make more sense with a little bit of programming experience.

Prerequisites

There are 4 main things that you need to have to get started:

VSCode - a text editor that we will use to write our code. You can download it from here:

Download Visual Studio Code - Mac, Linux, Windows

Node.js and npm - node allows us to run javascript directly on the computer (as opposed to the browser) and npm is short for (node package manager). It will allow us to download and install packages for our app. You can download them (as a bundle) here:

Download | Node.js

Foundry - foundry is an ethereum development framework. Forge is a tool for writing tests that ships with Foundry.

Foundry Book

Metamask Wallet - So we can communicate with the blockchain.

The crypto wallet for Defi, Web3 Dapps and NFTs | MetaMask

Let’s start

Go to the folder you want to create your app and open. Inside the terminal type the following:

npx thirdweb create

This is the starting point of the Thirdweb development stack. It will ask us what kind of project do we want to create.

Select Contract and we will name our project lifesimulator_contract. On the next questions select Forge, type the name of our contract LifeUpgradeContract and select ERC1155 + Lazy Mint.

Run cd lifesimulator_contract and code . to open the project inside VSCode.

Life Stages

For our game we will have 4 NFTs symbolising each of the life stages human go through - Baby, Teenager, Adult, Elder. Users will be able to claim Baby NFTs and combine them to receive a Teenager NFT in return, and so on.

💡 I generated the images using OpenAI’s DALLE-2.

Make sure people can claim only Baby NFTs

In order for our game to work, people should be able to claim only Baby NFTs otherwise it defeats the purpose of our game.

Go to src/LifeUpgradeContract.sol and add the following snippet right under the constructor method:

function verifyClaim(
        address _claimer,
        uint256 _tokenId,
        uint256 _quantity
    ) public view override {
        require(_tokenId == 0, "Only Babies are claimable!");
        require(_quantity == 1, "Only one Baby can be claimed at a time!");
    }

This will make sure that only babies are claimable and they can be claimed one at a time.

💡 TIP: Install the Solidity VSCode extension the get the proper highlighting.

We can now add our age method below the verifyClaim:

function age() public {
        if(balanceOf[msg.sender][2] >= 2){
            // Burn 2 Adult tokens
            _burn(msg.sender, 2, 2);
            // Mint 1 Elder token
            _mint(msg.sender, 3, 1, "");
        } else if (balanceOf[msg.sender][1] >= 2){
            // Burn 2 Teenager tokens
            _burn(msg.sender, 1, 2);
            // Mint 1 Adult token
            _mint(msg.sender, 2, 1, "");
        } else if (balanceOf[msg.sender][0] >= 2){
            // Burn 2 Baby tokens
            _burn(msg.sender, 0, 2);
            // Mint 1 Teenager token
            _mint(msg.sender, 1, 1, "");
        }
    }

Now it’s time to deploy our contract:

npx thirdweb deploy

The thirdweb dashboard will open. Fill in the fields and click Deploy Now.

Metamask may need some gas fees, be sure to top up here: https://goerlifaucet.com/

Wait for the transaction to be approved aaand you’re done. You have deployed your smart contract to the Goerli Testnet. Good job!

Uploading the images

Now we can go to the NFT tab in the thirdweb dashboard and click Single Upload. We will upload all of the images for our NFTs now. Order is important! First Baby, then Teenager, then Adult and finally Elder.

It should look like this:

Build our App

So we have our contract, but there’s no frontend for users to interact with our contract yet. Let’s fix that.

Go back to the terminal and type the following again:

npx thirdweb create

Instead of Contract, we will choose ***App*** now. Name will be life_simulator_app. Choose EVM, Next.js and TypeScript.

Run cd life_simulator_app and code . to open it in VSCode.

Firstly, go to pages/_app.tsx and change the activeChainId to be the Goerli Testnet.

const activeChainId = ChainId.Goerli;

In pages/index.tsx make sure to delete all the boiler plate code until you are left with something like this:

import { ConnectWallet } from "@thirdweb-dev/react";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>

        <div className={styles.connect}>
          <ConnectWallet />
        </div>

      </main>
    </div>
  );
};

export default Home;

If you now run npm run dev in the terminal you should be able to see this:

Great! Now let’s add the functionality to see our life simulator NFTs.

Now let’s update pages/index.tsx :

import { ConnectWallet, ThirdwebNftMedia, useAddress, useContract, useOwnedNFTs } from "@thirdweb-dev/react";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  // This is the address of our Life Simulator contract. You can find it in the Thirdweb dashboard.
  const {contract} = useContract("0x09E25aE9b62d8A3221694964fc8D13Ff9fdab4cA");

  // This is the address of the currently connected user's wallet.
  const address = useAddress();

  // This is a list of all the NFTs owned by the currently connected user.
  const { data: nfts } = useOwnedNFTs(contract, address);

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        {/* Connect Wallet button */}
        <div className={styles.connect}>
          <ConnectWallet />
        </div>
        {/* The Grid displaying our NFTs */}
        <div className={styles.grid}>{nfts?.map(nft => <div className={styles.nft} key={nft.metadata.id.toString()}>
          <ThirdwebNftMedia width="300"  metadata={nft.metadata} />
          {nft.metadata.name}
          <div>({nft.quantityOwned})</div>
          </div>)}
        </div>
      </main>
    </div>
  );
};

export default Home;

We have added a Grid to display our NFTs and given it a style of grid. We use the ThirdwebNftMedia to display the image that we uploaded earlier. We also display the quantity owned of each NFT.

Now let’s add some buttons in order to claim a Baby and also to age our NFTs so they merge.

import { ConnectWallet, ThirdwebNftMedia, useAddress, useContract, useOwnedNFTs, Web3Button } from "@thirdweb-dev/react";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  // This is the address of our Life Simulator contract. You can find it in the Thirdweb dashboard.
  const {contract} = useContract("0xC3D436BE929c8820f4A5fBcb2bd2DaC86d949af4");

  // This is the address of the currently connected user's wallet.
  const address = useAddress();

  // This is a list of all the NFTs owned by the currently connected user.
  const { data: nfts } = useOwnedNFTs(contract, address);

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        {/* Connect Wallet button */}
        <div className={styles.connect}>
          <ConnectWallet />
        </div>
        {/* The Grid displaying our NFTs */}
        <div className={styles.grid}>{nfts?.map(nft => <div className={styles.nft} key={nft.metadata.id.toString()}>
          <ThirdwebNftMedia width="300"  metadata={nft.metadata} />
          {nft.metadata.name}
          <div>({nft.quantityOwned})</div>
          </div>)}</div>
        {/* Button for claiming a Baby NFT */}
        <Web3Button contractAddress="0xC3D436BE929c8820f4A5fBcb2bd2DaC86d949af4" action={contract => contract.erc1155.claim(0,1)}>Claim a Baby</Web3Button>
        <hr style={{margin: 10}} />
        {/* Button for aging our human */}
        <Web3Button accentColor="blue" contractAddress="0xC3D436BE929c8820f4A5fBcb2bd2DaC86d949af4" action={contract => contract.call("age")}>Age 💀</Web3Button>
      </main>
    </div>
  );
};

export default Home;

For the buttons we use the Web3Button component. We pass in our smart contract address and also an action. On the first button we pass in the claim action in order to mint 1 Baby NFT. On the other button we can call the age method.

Lastly, we will add some confetti and celebration message when the user owns an Elder NFT, to make the game complete.

Install react-confetti by running npm install react-confetti. Make sure to also install the react-use library - npm install react-use. We can now create a variable to check whether the user owns an Elder NFT. If it’s true, we can show the confetti and the message.

import { ConnectWallet, ThirdwebNftMedia, useAddress, useContract, useOwnedNFTs, Web3Button } from "@thirdweb-dev/react";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import Confetti from 'react-confetti'
import useWindowSize from 'react-use/lib/useWindowSize'

const Home: NextPage = () => {
  // This is the address of our Life Simulator contract. You can find it in the Thirdweb dashboard.
  const {contract} = useContract("0x09E25aE9b62d8A3221694964fc8D13Ff9fdab4cA");

  // This is the address of the currently connected user's wallet.
  const address = useAddress();

  // This is a list of all the NFTs owned by the currently connected user.
  const { data: nfts } = useOwnedNFTs(contract, address);

  // This is the Elder NFT. We'll use it to show a confetti animation when the user owns it.
  const elderOwned = nfts?.find(nft => nft.metadata.id === "3");

  const { width, height } = useWindowSize()

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        {/* Confetti animation if we own the Elder NFT */}
        {elderOwned ? <Confetti width={width} height={height} /> : null}
        {/* Connect Wallet button */}
        <div className={styles.connect}>
          <ConnectWallet />
        </div>
        {elderOwned ? <div className={styles.celebrateText}>CONGRATULATIONS! YOU WON!</div> : null}
        {/* The Grid displaying our NFTs */}
        <div className={styles.grid}>{nfts?.map(nft => <div className={styles.nft} key={nft.metadata.id.toString()}>
          <ThirdwebNftMedia width="300"  metadata={nft.metadata} />
          {nft.metadata.name}
          <div>({nft.quantityOwned})</div>
          </div>)}</div>
        {/* Button for claiming a Baby NFT */}
        <Web3Button contractAddress="0x09E25aE9b62d8A3221694964fc8D13Ff9fdab4cA" action={contract => contract.erc1155.claim(0,1)}>Claim a Baby</Web3Button>
        <hr style={{margin: 10}} />
        {/* Button for aging our human */}
        <Web3Button accentColor="blue" contractAddress="0x09E25aE9b62d8A3221694964fc8D13Ff9fdab4cA" action={contract => contract.call("age")}>Age 💀</Web3Button>
      </main>
    </div>
  );
};

export default Home;

As you can see we added the Confetti and used the react-use library to get the window width and height. We only show the confetti and the congratulations message when the elderOwned variable is true.

For the styles, you can go to styles/Home.module.css and extend it with the following classes:

.nft {
  display: flex; 
  flex-direction: column;
  text-align: center;
  font-size: 3rem;
  padding: 1rem;
}  

/* make the css class celebratory */
.celebrateText{
  font-size: 1.5rem;
  padding: 1rem;
  color: #f213a4;
}

Final product

Awesome! We have everything ready now. If you visit https://localhost:3000 you should see our final app.

If you want to try the live demo, here is the link: https://life-simulator-app.vercel.app/

PS. Make sure you get an Elder NFT to see the confetti:

If you enjoyed this tutorial you can follow me on my socials:

Twitter

YouTube

Building a startup as a student (Part 1)

Alexander Gekov — Mon, 13 Dec 2021 23:50:06 +0000

Hello, ladies and gents 👋

In this first article I will introduce you to a project that I want to expand in the following months. I will walk you through my journey in steps and tell you about the thought process in my head.

The idea
The plan
- Initial market research
- Landing page and emails
- Google analytics and My Business
Conclusion

The idea 💡

I have been an Android user all my life, until this October, when I decided to buy an iPhone 12. On Android I used this app called PushBullet. With it I could send messages, images, files from my phone to my browser and vice-versa. It was a pretty solid extension, however when I searched the App Store for it I realized that the devs have taken it down and will not support iOS from now on. After I didn't manage to find a suitable alternative I decided to build my own extension and app and market it as a product.

The plan 🧠

I was pretty eager to start just coding, but I had read enough reddit posts and comments to know that the best approach is to "sell it and then create it". The reasoning behind this is because if nobody is interested in your product, there's no sense to pursue building it. A few good reads include "The Lean Startup" and "Building a Story Brand".

Initial Market Research

So the idea that I had was not really revolutionary, in fact it was the exact same concept of PushBullet but with a few added features and support for iOS. Initially, when searching for alternatives to PushBullet, I stumbled upon a few competitors. This was not a bad thing - this meant that there was a market for my idea and that I could get confirmation on what already works.
On top of that, I decided to create a survey and send it out to friends, who I thought may be interested. My next goal was building a landing page for my users to visit. ⏭️

Landing page and emails

I consider myself to have pretty good coding skills, however I did not want to waste time with designing a whole landing page. That's why I used Theme Forest to search for a cool theme for WordPress. WordPress is by far the most popular CMS (Content Management System) and it would make a great fit. I picked one (paid about 9$) and started customizing it.

After that, I created an account for MailChimp and set up their embedded sign up form link. Now when somebody signs up for the waitlist, I can keep track of that in the MailChimp dashboard. One other thing, that I set up was aliases in Gmail. (example: alexander@pushkeep.com) This way I don't have to pay for GSuite. You can find a tutorial here.

Google analytics and Google My Business

The last things that I will talk about in this part are analytics and registering your business to be known to Google. For the analytics I used Google analytics and their script tag that I just put in the HTML. You can find more information about it here. As for registering your business, if you go to the Google Dashboard and select My Business, a popup will appear where you can fill the questions and submit review. In order to verify your business, Google will send a letter to you that will arrive in 1-2 weeks, once arrived you can enter the code and officially be a business on Google!

Conclusion 🤯

This is the end of part 1, I am thinking of doing this as a series, where I will provide updates often. In the next article I will cover:

Social Media Creation
Mockups and Design with Figma
Tech Stack

If you want to support me with this journey - I will leave socials of PushKeep below:

Website: https://www.pushkeep.com/
Twitter: https://twitter.com/PushKeep
Discord: https://discord.com/invite/GwrFzZ5V

Stay Safe!