DEV Community: Fitra Rahmamuliani

Setting up GSAP's ScrollTrigger with Nuxt 3🔧🚀

Fitra Rahmamuliani — Mon, 19 Feb 2024 06:19:21 +0000

Introduction

Navigating the fusion of GSAP's ScrollTrigger with Nuxt 3 is an adventure filled with potential, but it's not without its share of obstacles. Many developers, myself included, have grappled with challenges ranging from hydration client mismatches to mystifying errors like "entry.5cb7c34d.js:20 GSAP target .partner-wrapper not found." Join me on this exploration as we unravel the intricacies and triumph over the roadblocks together.

The Initial Struggles

In the early stages of integrating GSAP's ScrollTrigger with Nuxt 3, many developers, including myself, encountered a series of challenges. From hydration client mismatches to perplexing errors like "entry.5cb7c34d.js:20 GSAP target .partner-wrapper not found," the road seemed daunting. To make matters worse, attempting to build and start the project resulted in a dreaded 500 error, persisting even in staging and production environments.

Identifying the Solution

After extensive research, trial-and-error, and searching the solution in the gsap github issues, the solution to these issues finally emerged. The key lies in configuring Nuxt 3 to play nicely with GSAP's ScrollTrigger. Let's take a step-by-step look at the transformation.

Step 1: Update Nuxt Config

Before:



    '@nuxtjs/i18n',
    'nuxt-simple-sitemap',
    'nuxt-api-party',
    '@nuxtjs/google-fonts'
  ],

  pinia: {
    autoImports: ['defineStore']
  },

After:



    '@nuxtjs/i18n',
    'nuxt-simple-sitemap',
    'nuxt-api-party',
    '@nuxtjs/google-fonts',
    '@hypernym/nuxt-gsap'
  ],

  gsap: {
    extraPlugins: {
      scrollTrigger: true,
      scrollTo: true
    }
  },

  pinia: {
    autoImports: ['defineStore']
  },

Step 2: Refactor GSAP Imports

Before:



<script setup>
import gsap from 'gsap'
import { ScrollTrigger, ScrollToPlugin } from 'gsap/all'

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)

After:



<script setup>
const { $gsap, $ScrollTrigger } = useNuxtApp()

With these changes, your project should now be free from the dreaded 500 errors, and GSAP's ScrollTrigger should function seamlessly as intended.

Step 3: Make sure to call the gsap and ScrollTrigger using $ and inside onMounted

Before:



onMounted(() => {
  links.value = gsap.utils.toArray('ul.privacy-policy__sticky-nav li a')
  links.value.forEach(link => {
    const el = document.querySelector(link.getAttribute('href'))
    const linkST = ScrollTrigger.create({
      trigger: el,
      start: 'top'
    })

    ScrollTrigger.create({
      trigger: el,
      start: 'top 10%',
      end: '+=50%',

After:



onMounted(() => {

  links.value = $gsap.utils.toArray('ul.privacy-policy__sticky-nav li a')

  links.value.forEach(link => {

    const el = document.querySelector(link.getAttribute('href'))

    const linkST = $ScrollTrigger.create({

      trigger: el,

      start: 'top'

    })

<span class="nx">$ScrollTrigger</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span>
  <span class="na">trigger</span><span class="p">:</span> <span class="nx">el</span><span class="p">,</span>
  <span class="na">start</span><span class="p">:</span> <span class="dl">'</span><span class="s1">top 10%</span><span class="dl">'</span><span class="p">,</span>
  <span class="na">end</span><span class="p">:</span> <span class="dl">'</span><span class="s1">+=50%</span><span class="dl">'</span><span class="p">,</span>

Conclusion:

The journey from troubleshooting GSAP's ScrollTrigger in Nuxt 3 to achieving a smooth, error-free integration can be challenging, but armed with the right knowledge and configuration, success is within reach. By following the steps outlined in this article, you can overcome the obstacles and bring delightful scroll-triggered animations to your Nuxt 3 project.

Happy coding and scrolling!

Integrating Nuxt 3 with Recaptcha v3 for Token Handling 🤖🔐

Fitra Rahmamuliani — Tue, 09 Jan 2024 06:53:07 +0000

Introduction

Embarking on the journey of web development with Nuxt 3 and Recaptcha v3 can be both thrilling and challenging. Today, I tried unveil a solution that simplifies the integration process, especially when dealing with the mysterious g-recaptcha-token that being needed by the API. We need to provide it as a field when submitting a post request to the API for backend purpose: to make sure that the recaptcha token received is matching with the setup of the recaptcha token saved from the backend. If you've ever struggled with the token being undefined in production even though we already trying to use the tutorial from the vue-recaptcha-v3, me too!

In this article, I will unravel the intricacies and provide a step-by-step guide to empower developers with javascript only (no typescript) in their quest for a flawless integration. Hope it will helps you.

Part 1: Plugins - The Gateway to Recaptcha Power

Before started, please make sure that you already install the vue-recaptcha-v3.

Plugins serve as the gateway to injecting external functionalities into your Nuxt 3 project. To kickstart the integration process, create a dedicated plugin for Recaptcha v3 on plugins/recaptcha.js.

// plugins/recaptcha.js
import { VueReCaptcha } from 'vue-recaptcha-v3'
// The plugin enables the usage of Google reCAPTCHA in a Nuxt.js application
// by registering the VueReCaptcha plugin with the necessary configuration options.
export default defineNuxtPlugin(nuxtApp => {
  const config = useRuntimeConfig()

  const options = {
    siteKey: config.public.RECAPTCHA_SITE_KEY,
    loaderOptions: {
      autoHideBadge: true,
      useRecaptchaNet: true,
      renderParameters: {
        hl: 'id'
      }
    }
  }
  nuxtApp.vueApp.use(VueReCaptcha, options)
})

Part 2: Composable - The Art of Reusable Logic

Create a composable to encapsulate the logic for handling Recaptcha interactions. This composable will be the engine that drives the token generation process.

Please make sure that you save it on the composables folder.

// composables/useGoogleRecaptcha.js

import { useReCaptcha } from 'vue-recaptcha-v3'
/**
 * The exported executeRecaptcha function allows
 * you to execute reCAPTCHA actions
 * and retrieve the reCAPTCHA token along with the header options
 * to be used in subsequent requests.
 */
export default () => {
  const recaptchaInstance = useReCaptcha()
  const executeRecaptcha = async action => {
    /**
     * Wait for the recaptchaInstance to be loaded
     * by calling the recaptchaLoaded method.
     * This ensures that the reCAPTCHA library is fully loaded
     * and ready to execute reCAPTCHA actions.
     */
    await recaptchaInstance?.recaptchaLoaded()
    const token = await recaptchaInstance?.executeRecaptcha(action)
    const headerOptions = {
      headers: {
        'google-recaptcha-token': token
      }
    }
    return { token, headerOptions }
  }
  return { executeRecaptcha }
}

Part 3: Calling the Function - Bridging the Frontend and Backend

Now that we have our Recaptcha composable ready, let's integrate it into our component and call the function whenever needed.

In this example, we use NuxtApiParty for handling the api that they will generate the useApiData based on our config. You can learn more about NuxtApiParty here: https://nuxt-api-party.byjohann.dev/

<template>
  <!-- insert code for your component's template -->
</template>

<script setup>
// other functions

const { executeRecaptcha } = useGoogleRecaptcha()

// the function where you submit the form 
const submitForm = async values => {
  isSubmitting.value = true
const { token } = await executeRecaptcha('submit')
// console.log(token) -> to make sure there is the token

// combine the form value with g-recaptcha-response that we need to send via api
const bodyData = {
    ...formData.value,
    'g-recaptcha-response': token
}

const { pending, error } = await useApiData(
    `/api/form_submissions`,
    {
      method: 'post',
      cache: false,
      body: bodyData
    }
  )

  if (error.value) {
    isSubmitting.value = pending.value
    showFail.value = true
  } else {
    isSubmitting.value = pending.value
    clearForm()
    showSuccess.value = true
  }
}

// other functions 
</script>

Additional step (if your plugins are not being called)

All plugins inside are auto-registered, you don't need to add them to your nuxt.config separately.
source: Thanks to
Thiru for sending this source https://nuxt.com/docs/guide/directory-structure/plugins

If you have already registered but are not being called (special case), you can try this additional step:

Nuxt Config - Configuring the Nexus of Nuxt 3 and Recaptcha

Now, let's configure Nuxt to incorporate the Recaptcha plugin seamlessly. Open your nuxt.config.ts file and include the plugin in the plugins array.

// nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // {insert CODE for other Nuxt config options}

  // Include the Recaptcha plugin
  plugins: [{src: '~/plugins/recaptcha.js'}],

  // {insert CODE for other Nuxt config options}
};

Conclusion:

Congratulations! You've embarked on a journey to seamlessly integrate Nuxt 3 with Recaptcha v3, overcoming the challenges associated with g-recaptcha-token (getting the token sent to the API). This solution ensures a smooth transition from development to production, empowering developers to create secure and reliable web applications. Happy coding!

Reference:

https://mehmetozanguven.com/spring-boot/integrate-recaptcha-v3-into-spring-boot-and-vue/