Forem: cn-2k

The easiest way to migrate from Nuxt 3 to Nuxt 4!

cn-2k — Mon, 30 Dec 2024 18:57:38 +0000

Nuxt 4 is already born and giving your first steps! Check out in this post how to migrate your current Nuxt 3 project to Nuxt 4. 🚀

Don't be upset about another Vue or Nuxt migration (yeah, migrations s*cks, I know...), but that one is easy and well documented by the Vue/Nuxt core team and I'll share my favorite way for do it.

⚠️ Quickly reminder: Nuxt 4 has not been officialy released yet, but available for use and testing, so be careful when migrating large codebases.

1 - Introducing codemods

Codemods are automated scripts used to refactor codebases quickly and consistently. They are particularly helpful during major upgrades, like migrating to Nuxt 4, where some breaking changes and deprecations may require updates across your project.

By using codemods, you can automate repetitive tasks, such as renaming files, updating APIs, or adapting to new directory structures (that one is life savier for Nuxt 4 migration).

2 - Set compatibily version on `nuxt.config.ts`

Before install and run the migration codemod, make sure to set compatibilityVersion to 4 in your nuxt.config.ts:

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  }
})

You will be able to remove this when Nuxt 4 will be officially released.

3 - Run the codemod script

In this step you'll need to run the codemod script for migrate your current Nuxt 3 project structure for Nuxt 4 structure.

⚠️ Before finnaly run the codemod script, read more about the changes that will happen on Nuxt 4 and the impact of each one on the official upgrade guide:
https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4

Run this codemod script in your terminal inside the project folder:

npx codemod@latest nuxt/4/migration-recipe

When you run this script, you'll have the option for select only the changes that you want to be done.

After that, the codemod will make sure to make all the changes that you have choosen and let your code ready for Nuxt 4!

Do I need to migrate for Nuxt 4 now? I'm out of time? 😱

Definitively not! You can be prepared and test early but you don't need to migrate now, Nuxt 4 is currently in the testing phase and we're waiting for a big update of Nitro for it to be officially released.

Check this video from Alexander Lichter for further understanding:

Creating a Scroll-Spy Menu with Nuxt 3 and Intersection Observer API

cn-2k — Mon, 30 Dec 2024 17:10:55 +0000

Hey, What's up!? In this article I'll show you how to build a fancy menu that highlights the active section as you scroll with the power of Intersection Observer API and Nuxt.

✨ Demo: https://nuxt-startup-landing-page.vercel.app/ (scroll down the page and check the active state of the menu)

Requirements for a good understanding of this post:

TailwindCSS
Vuejs Class and Style Bindings
Vuejs Composables
Nuxt Basics

Step 1: Create the Scroll-Spy Logic

For this we will create a single Vuejs composable for tracking visible sections using the Intersection Observer API.

/composables/useScrollSpy.ts

export const useScrollspy = () => {
  const observer = ref<IntersectionObserver>()

  const visibleHeadings = ref<string[]>([])

  const activeHeadings = ref<string[]>([])

  const handleIntersection = (entries: IntersectionObserverEntry[]) => {
    entries.forEach((entry) => {
      const id = entry.target.id

      if (entry.isIntersecting) {
        visibleHeadings.value = [...visibleHeadings.value, id]
      } else {
        visibleHeadings.value = visibleHeadings.value.filter(h => h !== id)
      }
    })
  }

  const startObservingHeadings = (headings: Element[]) => {
    headings.forEach((heading) => {
      if (!observer.value) return

      observer.value.observe(heading)
    })
  }

  watch(visibleHeadings, (newHeadings) => {
    if (newHeadings.length === 0) {
      activeHeadings.value = []
      history.replaceState(null, "", window.location.pathname)
    } else {
      activeHeadings.value = newHeadings

      const activeSectionId = newHeadings[0]
      if (activeSectionId) {
        history.replaceState(null, "", `#${activeSectionId}`)
      }
    }
  })

  // Creating a instance of observer
  onBeforeMount(() => {
    observer.value = new IntersectionObserver(handleIntersection, {
      threshold: 0.5
    })
  })

  // Disconnecting the observer instance
  onBeforeUnmount(() => {
    observer.value?.disconnect()
  })

  return {
    visibleHeadings,
    activeHeadings,
    startObservingHeadings
  }
}

Where:
visibleHeadings: Stores the IDs of the currently visible sections of the page.

activeHeadings: Stores the ID of the currently active section, based on visibility.

handleIntersection Function: Updates the visibleHeadings array whenever an intersection occurs, adding or removing section IDs depending on visibility.

startObservingHeadings Function: Begins observing the provided headings (elements), using the IntersectionObserver.

watch Effect: listens to the visibleHeadings array and updates activeHeadings as well as the browser's history (history.replaceState) to reflect the active section in the URL. It also ensures that if no section is visible, the page URL is updated too.

Finally we return some resources to apply on Header component.

Step 2: Build the Menu Component

/components/HeaderComponent.vue

<template>
  <header class="bg-gray-900/60 backdrop-blur border-b border-gray-800 -mb-px sticky top-0 z-[99999]">
    <div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl flex items-center justify-center gap-3 h-16 lg:h-20">
      <slot name="center">
        <ul class="items-center gap-x-10 flex border shadow-sm border-gray-700 bg-gray-600/10 px-6 py-1.5 rounded-full">
          <li
            v-for="item in links"
            :key="item.to"
            class="relative"
          >
            <a
              class="text-sm/6 font-semibold flex items-center hover:text-purple-600 gap-1 transition-colors"
              :class="{
                'text-purple-500': item.active,
                'text-zinc-200': !item.active
              }"
              :href="item.to"
            >
              {{ item.label }}

            </a>
          </li>
        </ul>
      </slot>
    </div>
  </header>
</template>

<script setup lang="ts">
const nuxtApp = useNuxtApp()
const { activeHeadings, startObservingHeadings } = useScrollspy()

const links = computed(() => [
  {
    label: "Features",
    to: "#features",
    active: activeHeadings.value.includes("features") && !activeHeadings.value.includes("pricing")
  },
  {
    label: "Pricing",
    to: "#pricing",
    active: activeHeadings.value.includes("pricing") && !activeHeadings.value.includes("features")
  },
  {
    label: "Testimonials",
    to: "#testimonials",
    active: activeHeadings.value.includes("testimonials") && !activeHeadings.value.includes("pricing")
  }
])

nuxtApp.hooks.hookOnce("page:finish", () => {
  startObservingHeadings([
    document.querySelector("#features"),
    document.querySelector("#pricing"),
    document.querySelector("#testimonials")
  ] as any)
})
</script>

The Header component above render our menu with some styles using TailwindCSS;

The links array contains objects for each section (e.g., "Features", "Pricing", "Testimonials"), with properties for the label, target URL (to), and active state.
The activeHeadings array is watched to determine which link should be highlighted.
When the page finishes loading (page:finish), the startObservingHeadings function is called to observe the relevant sections (#features, #pricing, #testimonials), updating the active state as the user scrolls.

Futher info: nuxtApp.hooks.hookOnce is a method provided by Nuxt 3 that allows you to register a hook that will run only once during the lifecycle of the application. In this case we use this hook to call our function startObservingHeadings after the page is fully loaded, but only once.

Step 3: Add Content Sections

Finally you'll need to create your template sections and see the menu working:

/pages/index.vue (make sure to have a default Nuxt Layout created on /layouts folder)

<template>
<div>
  <HeaderComponent />
  <div class="p-10">
    <section id="section1" class="h-screen">Section 1</section>
    <section id="section2" class="h-screen">Section 2</section>
    <section id="section3" class="h-screen">Section 3</section>
    <section id="features" class="h-screen scroll-mt-28">Features</section>
    <section id="pricing" class="h-screen scroll-mt-28">Pricing</section>
    <section id="testimonials" class="h-screen scroll-mt-28">Testimonials</section>
  </div>
</div>
</template>

<style>
html {
  scroll-behavior: smooth
}
</style>

Note that we've used the scroll-mt class from TailwindCSS to control the scroll offset arround our sections when they are navigated via the menu. For example, clicking "Features" in the menu smoothly scrolls (through scroll-behavior: smooth class) to the Features section while applying a slight offset to ensure proper spacing around the section's content.

That's it! You can use, customize and make sure to adapt this menu for your use cases. Happy coding, Nuxter!

How I implemented Cloudflare Workers in my app

cn-2k — Sun, 14 Apr 2024 22:47:06 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

Nottia is a Nuxt 3 simple app that you can generate notes, dont forget your ideas, just create a note! xD

In this app you also have the option to generate notes by sending prompts to an AI and receiving a response based on that prompt.

Generating a note based on user prompt:

Generating a image based on user prompt:

Demo

See the demo right here:

On Cloudflare Pages:
https://nottia.pages.dev/

On Vercel:
https://nottia.vercel.app/

My Code

The source code of the app was split in two repositories: one for the front-end and another for the Cloudflare Worker.

Nottia:

cn-2k / nottia

Project for the Cloudflare Challenge on dev.to

About this project

This project was maded for the Cloudflare AI Challenge from dev.to, it allows you to create notes with or without the help of artificial intelligence using two AI Workers models from Cloudflare to generate text (@cf/meta/llama-2-7b-chat-fp16) and generate images (@cf/stabilityai/stable-diffusion-xl-base-1.0).

The project was splitted in two repositories, check the repo related to Cloudflare Worker for this app: Nottia Worker

Generating a note based on user prompt

Creating a image based on user prompt

Techs used to build this project

Frontend Vuejs - TypeScript - Nuxtjs - TailwindCSS - Shadcn/vue

Installation Instructions

Requirements

Clone the repo

# Clone the repo with git clone command
$ git clone https://github.com/cn-2k/nottia.git
# Go to project folder
$ cd nottia

Install dependencies and start the dev server

# Inside the project folder, install the necessary dependencies with npm install
$ npm install
# Start the server
$ npm

…

View on GitHub

Nottia Worker:

cn-2k / nottia-worker

Note and image generator

This repo is the worker for Nottia challenge app, combines two AI models to generate notes or images based on user prompts, using Cloudflare Workers.

Check the Web App that use this worker: Nottia

Installation Instructions

PS: you dont need to make this steps if you just want to use the webapp since it's used the worker link that was deployed on cloudflare network.

But if you want to run and see the worker:

Clone the repo

# Clone the repo with git clone command
$ git clone https://github.com/cn-2k/nottia-worker.git
# Go to project folder
$ cd nottia-worker

Run the worker on dev mode

# Install Wrangler
$ npm install wrangler --save-dev
# Install project dependencies
$ npm install
# Go to project folder and run the dev command
$ wrangler dev

Now see the output in terminal and check where the worker is running.

Usage

If…

View on GitHub

Journey

Initially this app was focused on register notes manually, with this challenge I saw the oportunitty for delve deeper into AI, Serverless Workers, and the entire Cloudflare platform. Integrating these models was a significant challenge for me, but in the end, they performed as expected.

Now I see space for integrate AI on any app, Cloudflare is amazing!

Multiple Models and/or Triple Task Types

The app use two AI Workers models from Cloudflare to generate text (@cf/meta/llama-2-7b-chat-fp16) and generate images (@cf/stabilityai/stable-diffusion-xl-base-1.0).

New way of work with V-Model in Vue.js 3!

cn-2k — Tue, 09 Jan 2024 15:49:18 +0000

Vue.js 3.4 release introduces the new defineModel() macro, which is now stable! With it you can create v-model without writing props and emits for each one.

Previous way (Vue.js 3.3-):

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

New Way (Vue.js 3.4+):

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

Very clean, right?

You can also type your v-model:

const model = defineModel<string>()

Points to note:

The value returned by defineModel() is a ref so you can access and mutate the value.
Keep in mind that defineModel() is a macro, so under the hood, everything is the same as in the previous version.

Make sure to read the Vue 3 docs for more info about the defineModel() usage:

https://vuejs.org/api/sfc-script-setup.html#definemodel
https://vuejs.org/guide/components/v-model#basic-usage

wangEditor - Vue 3 Rich Text Editor (w/ Typescript)

cn-2k — Wed, 22 Nov 2023 12:44:52 +0000

In this article I'll show an interesting rich text editor that I found for Vue 3 and how to implement it in your next Vue 3 App.

wangEditor 5 - Open source web rich text editor, run right out of the box, config simply.

1 - Install the dependencies:

Editor package:

yarn add @wangeditor/editor
# npm install @wangeditor/editor --save

Vue 3.x editor component:

yarn add @wangeditor/editor-for-vue@next
# npm install @wangeditor/editor-for-vue@next --save

In order to start using the editor we need to understand a few things before:

In this case @wangeditor/editor will serve us some Typescript interfaces for typing our editor instance and more functionalities (read more on wangEditor docs).
The @wangeditor/editor-for-vue will serve us the Toolbar and Editor components for use on a Vue 3 App.

2 - Coding the script and style

Let's start creating a component called wangEditor.vue and implementing the script and style sections.

@/components/wangEditor.vue

<template>
</template>

<script setup lang="ts">
import { onBeforeUnmount, shallowRef, reactive, toRefs } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import {
  IDomEditor,
  IEditorConfig,
  IToolbarConfig,
} from "@wangeditor/editor";

const props = defineProps<{
  modelValue: string;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

// Editor instance shallowRef must be used
const editorRef = shallowRef<IDomEditor>();

const state = reactive({
  toolbarConfig: {} as IToolbarConfig,
  editorConfig: {
    placeholder: "Write something...",
    customAlert: () => {},
    scroll: true,
    readOnly: false,
    autoFocus: true,
    hoverbarKeys: {},
  } as IEditorConfig,
  defaultHtml: props.modelValue,
  mode: "default",
});

const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state);

const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor;
};

function handleChange(editor: IDomEditor) {
  emit("update:modelValue", editor.getHtml());
}

// When the component is destroyed, the editor is also destroyed in time.
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

Explanation

Imports necessary functions and types from Vue and WangEditor libraries.
Defines component props using defineProps for a model value.
Defines component emits using defineEmits for updating the model value.
Initializes a shallowRef for the WangEditor instance (editorRef).
Defines a reactive state object (state) containing configurations for the toolbar, editor, default HTML content, and mode (refer to wangEditor doc website).
Uses toRefs to create individual refs for the properties of the state object.
Defines a function (handleCreated) to be called when the editor is created, storing the editor instance in editorRef.
Defines a function (handleChange) to be called when the editor content changes, emitting an update to the model value.
Uses onBeforeUnmount to destroy the editor instance when the component is about to be unmounted.
Imports the WangEditor styles on <style> tag src prop.

3 - Coding the template (using wangEditor Vue Components)

@/components/wangEditor.vue

<template>
  <div
    style="border: 1px solid gray"
  >
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      style="border-bottom: 1px solid gray;"
      :mode="mode"
    />
    <Editor
      :defaultConfig="editorConfig"
      v-model="defaultHtml"
      @on-change="handleChange"
      style="height: 300px; overflow-y: hidden; border-radius: 20px"
      :mode="mode"
      @on-created="handleCreated"
    />
  </div>
</template>

<Toolbar> represents the top part of editor, all text formatter functions are here.
<Editor> represents the textarea section.
Each component has its own props and methods, so we simply need to bind them.

Fullcode:

<template>
  <div
    style="border: 1px solid gray"
  >
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      style="border-bottom: 1px solid gray;"
      :mode="mode"
    />
    <Editor
      :defaultConfig="editorConfig"
      v-model="defaultHtml"
      @on-change="handleChange"
      style="height: 300px; overflow-y: hidden; border-radius: 20px"
      :mode="mode"
      @on-created="handleCreated"
    />
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, shallowRef, reactive, toRefs } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import {
  IDomEditor,
  IEditorConfig,
  IToolbarConfig,
} from "@wangeditor/editor";

const props = defineProps<{
  modelValue: string;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

// Editor instance shallowRef must be used
const editorRef = shallowRef<IDomEditor>();

const state = reactive({
  toolbarConfig: {} as IToolbarConfig,
  editorConfig: {
    placeholder: "Write something...",
    customAlert: () => {},
    scroll: true,
    readOnly: false,
    autoFocus: true,
    hoverbarKeys: {},
  } as IEditorConfig,
  defaultHtml: props.modelValue,
  mode: "default",
});

const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state);

const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor;
};

function handleChange(editor: IDomEditor) {
  emit("update:modelValue", editor.getHtml());
}

// When the component is destroyed, the editor is also destroyed in time.
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

How to exclude some menus from Toolbar?

On toolbarConfig object we can pass a excludeKeys array containing the keys of the menu items we want to remove:

  toolbarConfig: {
    excludeKeys: [
      "headerSelect",
      "group-more-style",
      "fontFamily",
      "lineHeight",
      "group-indent",
      "insertLink",
      "group-image",
      "group-video",
      "insertTable",
      "codeBlock",
      "fullScreen",
    ],
  } as IToolbarConfig,

Refer to https://www.wangeditor.com/en/v5/toolbar-config.html#excludekeys for more info!

How to exclude some menus from editor Hoverbar?

On the editorConfig object, we can pass a text object with a menuKeys array, specifying only the keys we want on the Hover Bar:

  editorConfig: {
    placeholder: "Write something...",
    customAlert: () => {},
    scroll: true,
    readOnly: false,
    autoFocus: true,
    hoverbarKeys: {
      text: {
        menuKeys: [
          "blockquote",
          "bold",
          "through",
          "italic",
          "color",
          "bgColor",
          "bulletedList",
          "numberedList",
          "clearStyle",
        ],
      },
    },
  } as IEditorConfig,

Refer to https://www.wangeditor.com/en/v5/editor-config.html for more info!

Usage

Now you just need to import your component inside any Vue file:

@/views/EditorPage.vue

<template>
 <div>
   <WangEditor v-model="text" />
 </div>
<template>

<script setup lang="ts">
import { ref } from 'vue'
import WangEditor from '@/components/wangEditor.vue'

const text = ref<string>("")
</script>

That's it!

How scroll to specific element with Vue.js 3

cn-2k — Tue, 21 Nov 2023 16:36:52 +0000

Sometimes, we need to make a scroll go to specific section/element of our page. Achieving this with Vue is very simple; you just need to use a template ref for that. Let's see how to do it.

1 - Create a component template and give it a ref attribute:

<template>
 <main>
   <section ref="sectionRefEl">
     <some-component>element</some-component>
   </section>
 </main>
</template>

2 - Create the script section and declare your ref inside it:

<script setup lang="ts">
import { ref } from 'vue'

// Here is our template ref typed as HTMLElement or null
const sectionRefEl = ref<HTMLElement | null>(null)
</script>

⚠️ ⚠️ ⚠️ Attention!
After Vue 3.5 release you have to use useTemplateRef composable to declare your template ref.

3 - Create a function that make the scroll happen:

<script setup lang="ts">
import { ref } from 'vue'

// Here's our template ref typed as HTMLElement or null
const sectionRefEl = ref<HTMLElement | null>(null)

// Using scrollIntoView() function to achieve the scrolling
function scrollTo(view: Ref<HTMLElement | null>) { 
  view.value?.scrollIntoView({ behavior: 'smooth' }) 
}
</script>

The scrollTo function accepts a ref parameter and enables scrolling by using the DOM API function scrollIntoView().

Read more about the scrollIntoView() function to learn more.

4 - Now you just need to call your function anywhere you want, passing a ref as param and see the scroll happening.

For example, you can create a button firing the method:

<template>
 <main>
   <section ref="sectionRefEl">
     <some-component>element</some-component>
   </section>
   <button @click="scrollTo(sectionRefEl)">Scroll to</button>
 </main>
</template>

And that's it!

Further reading:
Template Refs (Vuejs)
Element.scrollIntoView()

Expose Child Component Methods to Parent Components with Vue 3 defineExpose

cn-2k — Tue, 18 Apr 2023 18:55:01 +0000

Vue 3's Composition API introduces a new method for exposing components' public methods and properties to their parent components called defineExpose. This method allows you to define what parts of your component should be publicly accessible, making it easier to use child components in parent components.

To use defineExpose, you need to define it in your child component and use it to expose the methods or properties you want to make public. Here's an example with Vue 3 (script setup):

childComponent.vue

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const count = ref(0)

  const increment = () => {
    count.value++
  }

  const double = () => {
    count.value *= 2
  }

  defineExpose({
    increment,
    count
  })
</script>

In this example, we have a child component that has a count ref and two methods: increment and double. We want to expose the increment method and the count ref to the parent component using defineExpose.

Now let's see how to use this child component in a parent component and access its public methods and properties:

parentComponent.vue

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="onChildClick">Call Child's Increment Method</button>
    <p>Child's Count: {{ childCount }}</p>
  </div>
</template>

<script setup>
  import ChildComponent from './ChildComponent.vue'
  import { ref } from 'vue'

  const child = ref(null)
  const childCount = ref(0)

  const onChildClick = () => {
    child.value.increment()
  }

  onMounted(() => {
    childCount.value = child.value.count
  })
</script>

In this parent component, we import the child component and use a ref to access its methods and properties. We can call the child component's increment method by calling child.value.increment(), and we can access its count ref by calling child.value.count.

Using defineExpose can make it much easier to work with child components in parent components because you can control what parts of the child component are accessible and avoid accidentally accessing private methods or properties.

That's it! With defineExpose, you can expose public methods and properties of your child components to their parent components and make your code more organized and easier to use.

Futher Reading:
https://vuejs.org/api/sfc-script-setup.html#defineexpose

How to set default route in Vue.js with Vue Router!

cn-2k — Tue, 14 Feb 2023 19:40:26 +0000

In this article I'll teach you how to set an specific route to be default in your Vue application, this approach is more common in Dashboard Layouts, let's see.

Let's Setup!

I have an folder called /router and inside it have two files called respectively index.ts and routes.ts

routes.ts

export default [
  {
    path: "/",
    component: () => import("@/components/Layout/BaseLayout.vue"),
    children: [
      {
        path: "/customer",
        name: "Customer",
        component: () => import("@/views/Customer.vue"),
      },
    ],
  },
];

index.ts

import { createRouter, createWebHashHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

With this setup, the default route when user will visit the app will be '/', but this route only render the base layout from our dashboard, let see how to redirect user for another default router using redirect approach.

Using a redirect to the default route:

Add a redirect property to the router, and set it's value to the path of the default route. For example:

export default [
  {
    path: "/",
    redirect: { path: "/customer" }, // redirect property 
    component: () => import("@/components/Layout/BaseLayout.vue"),
    children: [
      {
        path: "/customer",
        name: "Customer",
        component: () => import("@/views/Customer.vue"),
      },
    ],
  },
];

This sets the /customer route (which is mapped to the Home component) as the default, and also maps the /path to the same component via a redirect. When the user visits the website, they will be automatically redirected to the Home component.

That's all, if you have more ways to achieve this, share with us! See'ya!

Creating stores with pinia in Vue 3 + Typescript

cn-2k — Fri, 23 Sep 2022 16:48:46 +0000

Pinia is the new state management system for Vue and in this article I'll show two ways of use this amazing tool with Typescript and simple examples.

1 - Simple store with Typescript assertion

import { defineStore } from "pinia";
import type { MyInterface } from "@/types";

type RootState = {
  myState: MyInterface[];
};

const useMyStore = defineStore("franchiseStore", {
  state: () =>
    ({
      myState: [],
    } as RootState),
  actions: {
    setCurrentState(state: MyInterface[]) {
      this.myState = state
    },
  },
});

export default useMyStore;

2 - Simple store with Typescript assertion and using Composition API

import { defineStore } from 'pinia';
import { ref } from 'vue';
import type { MyInterface } from '@/types'

export const useMyStore = defineStore('myStore', () => {

  const myState = ref<Array<MyInterface>>([]);

  function setCurrentState(state: MyInterface[]) {
    myState.value = state
  }

  return { myState, setCurrentState };
});

export default useMyStore;

Working with v-model in Vue 3

cn-2k — Thu, 18 Aug 2022 16:45:38 +0000

In this post I will show you'll how to work with v-model in Vue 3 + Composition API using <script setup> on custom components, there's few ways to work with it, let's take a look!

First of all we always need to create an custom prop and emit for parent component:

1 - Creating modelValue prop and update emit (child component)

<script setup>
defineProps({
  modelValue: String
});

let emit = defineEmits(['update:modelValue']);
</script>

Note: 'update:modelValue' can't be changed on next steps, otherwise the emit event wont work.

2 - Firing the emit event (child component)

In this case I will use an textarea to do it, but you can use with an input too.

<template>
  <textarea
    @keyup="emit('update:modelValue', $event.target.value)"
    v-text="modelValue" 
  />
</template>

3 - Using your custom component (parent component)

Now you can call your custom component and pass a v-model.

<MyFancyTextArea v-model="comment" />

Usage with Typescript

For use v-model w/ Typescript is very simple, look the example below:

<script setup lang="ts">
defineProps<{
  modelValue: string,
}>()

const emit = defineEmits<{
    (event: 'update:modelValue', payload: string): void;
}>();
</script>

<template>
  <input
    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
  />
</template>

That's it!

If you want to read and learn more details about v-model usage, please make sure to visit the Vue 3 official documentation about it.

See'ya!

References for this post:
https://blog.q-bit.me/an-introduction-to-vue-3-typescript-component-properties-and-events/
https://vuejs.org/guide/components/events.html#usage-with-v-model

Check if named slot exists in your page with Vue.js

cn-2k — Fri, 01 Jul 2022 11:50:38 +0000

In the Composition API we have the runtime function useSlots() that can be used to check if our slot exist or not, to do that we need to import it from Vue and check the existence of slot directly in template.

<template>
    <div>
        <nav
            v-if="slots.myNamedSlot"
        >
            <slot name="myNamedSlot" />
        </nav>
    </div>
</template>

<script setup>
import { useSlots } from 'vue'

// this const will be avaiable on template
const slots = useSlots()
</script>

<style>
</style>

Attention: slots elements are dynamic and not reactive, so we need to check them directly in template.

That's it!

See'ya!

Working with emits in Vue 3 + Typescript

cn-2k — Fri, 24 Jun 2022 16:51:45 +0000

In this post I will show you'll how to work with emits Vue 3 + Composition API using <script setup>, there's few ways to work with it, let's take a look!

Using the defineEmits() macro we can declare emits like:

1 - Array of strings

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

2 - Object syntax

<script setup>
const emit = defineEmits({
  submit(payload) {
    // return `true` or `false` to indicate
    // validation pass / fail
  }
})
</script>

3 - Runtime or base type declaration

<script setup lang="ts">
// runtime
const emit = defineEmits(['change', 'update'])

// type-based (TS)
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

That's it!

If you want to read and learn more details about component emits declaration, please make sure to visit the Vue 3 official documentation about emits.

See'ya!

Article references:
https://vuejs.org/guide/components/events.html
https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits

Forem: cn-2k

The easiest way to migrate from Nuxt 3 to Nuxt 4!

1 - Introducing codemods

2 - Set compatibily version on nuxt.config.ts

3 - Run the codemod script

Do I need to migrate for Nuxt 4 now? I'm out of time? 😱

Creating a Scroll-Spy Menu with Nuxt 3 and Intersection Observer API

Requirements for a good understanding of this post:

Step 1: Create the Scroll-Spy Logic

Step 2: Build the Menu Component

Step 3: Add Content Sections

How I implemented Cloudflare Workers in my app

What I Built

Demo

My Code

cn-2k / nottia

Project for the Cloudflare Challenge on dev.to

About this project

Generating a note based on user prompt

Creating a image based on user prompt

Techs used to build this project

Installation Instructions

Requirements

Clone the repo

Install dependencies and start the dev server

cn-2k / nottia-worker

Note and image generator

Installation Instructions

Clone the repo

Run the worker on dev mode

Usage

Journey

New way of work with V-Model in Vue.js 3!

Points to note:

wangEditor - Vue 3 Rich Text Editor (w/ Typescript)

1 - Install the dependencies:

2 - Coding the script and style

Explanation

3 - Coding the template (using wangEditor Vue Components)

Fullcode:

How to exclude some menus from Toolbar?

How to exclude some menus from editor Hoverbar?

Usage

How scroll to specific element with Vue.js 3

Expose Child Component Methods to Parent Components with Vue 3 defineExpose

How to set default route in Vue.js with Vue Router!

Let's Setup!

Using a redirect to the default route:

Creating stores with pinia in Vue 3 + Typescript

1 - Simple store with Typescript assertion

2 - Simple store with Typescript assertion and using Composition API

Working with v-model in Vue 3

Usage with Typescript

Check if named slot exists in your page with Vue.js

Working with emits in Vue 3 + Typescript

2 - Set compatibily version on `nuxt.config.ts`