DEV Community: Michael Synan

The Perfect Infinite Scroll Marquee Component for Nuxt

Michael Synan — Sun, 26 Nov 2023 18:17:19 +0000

Creating a Scrolling Marquee Component in Nuxt

Have you ever needed a smooth, continuous scrolling marquee for your Nuxt projects? Inspired by the modern approach of Ryan Mulligan, I've created the perfect responsive Nuxt component for you. Ryan Mulligan's method serves as a great foundation for this implementation, so feel free to check it out for a more in-depth explanation of the CSS involved.

Key Features of the Scrolling Marquee Nuxt Component

Responsive Font Sizing: Ensuring that your marquee looks great on devices of all sizes.
Customizable Speed: Adjust the scrolling speed to match the pacing of your site.
Base Font and Message Props Options: Tailor the font style and the message content to fit your design needs.

This component is a practical addition to your Nuxt project—simply copy the entire component and make note of the available props. With the ability to easily modify the speed, font, and message, you can integrate this marquee into various parts of your web applications, whether it's for announcements, promotions, or just some dynamic flair.

Component Code

<template>
  <div v-if="isFontSizeSet" class="marquee">
    <div
      class="marquee__content"
      :style="{ animationDuration: animationSpeed }"
    >
      <span
        v-for="(letter, index) in (message + ' ').split('')"
        :key="index"
        class="marquee__item"
      >
        {{ letter }}
      </span>
    </div>
    <div
      class="marquee__content"
      :style="{ animationDuration: animationSpeed }"
    >
      <span
        v-for="(letter, index) in (message + ' ').split('')"
        :key="index + 1000"
        class="marquee__item"
      >
        {{ letter }}
      </span>
    </div>
  </div>
</template>
<script setup>
import { computed, watchEffect, onMounted } from 'vue';

const props = defineProps({
  fontSize: {
    type: String,
    default: '16px',
  },
  message: {
    type: String,
    default: 'THIS IS THE DEFAULT MESSAGE',
  },
  speed: {
    type: Number,
    default: 10,
  },
});

const animationSpeed = computed(() => `${props.speed}s`);
const isFontSizeSet = ref(false);

onMounted(() => {
  watchEffect(() => {
    document.documentElement.style.setProperty(
      '--baseFontSize',
      props.fontSize
    );
    isFontSizeSet.value = true;
  });
});
</script>

<style>
.marquee {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  user-select: none;
  display: flex;
  gap: var(--gap);
  --gap: 1rem;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll linear infinite;
}

.marquee__item {
  white-space: nowrap;
  font-size: var(--baseFontSize);
  margin-right: 1px;
}

@media (max-width: 600px) {
  .marquee__item {
    font-size: calc(var(--baseFontSize) * 0.5);
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .marquee__item {
    font-size: calc(var(--baseFontSize) * 0.75);
  }
}

@media (min-width: 1025px) {
  .marquee__item {
    font-size: calc(var(--baseFontSize) * 2);
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
</style>

You'll notice the baseFontSize value is applied inside of the onMounted lifecycle hook preventing rendering before the style is set.

Inside Parent

Then in the parent you can simply do something like this:

<ScrollingMarquee fontSize="100px" message="My Awesome Marquee" speed="6" />

You can find a fully working example here: https://stackblitz.com/edit/nuxt-starter-emzrvl?file=app.vue

As someone who's spent a lot of time trying to get the perfect scrolling marquee code, I'm excited to share this component with the community.

I'm always happy to connect with fellow #vue or #nuxt developers. If you find this component useful or have any suggestions for improvement, feel free to reach out to me on LinkedIn or check out my personal website. Your feedback and connections are invaluable as we all strive to build a more vibrant and innovative web development community.

Remember to share your experiences and insights if you integrate this component into your projects. Happy coding!

Nuxt3 Form with Feedback

Michael Synan — Tue, 04 Jul 2023 13:47:03 +0000

In my previous post I demonstrated how to submit form content to Supabase so you can start building your email list. Below, I will show how to add some basic validation and user feedback to help make sure the user is submitting useful information.

If you're using a chrome-based browser, you can check out the Stackblitz embed, otherwise visit here:

The final version will look like this:

This form will use two components, the signup form itself, as well as a feedback component which receives a prop from the form indicating what type of feedback to provide upon hitting the "submit" button and performing basic validation.

Let's go. 🏃‍♀️💨

Nuxt3 Template



<template>
  <div>
    <div class="flex items-center justify-center h-screen bg-black">
      <div
        class="text-center text-white p-6 border-2 border-white w-full max-w-md"
      >
        <h1 class="text-2xl mb-3">Join Our Newsletter</h1>
        <p class="mb-6 text-lg">Get amazing updates right to your inbox.</p>
        <form @submit.prevent="submitEmail" class="flex flex-col">
          <label class="mb-4 text-left text-stone-400">
            Name
            <input
              v-model="name"
              type="text"
              class="bg-gray-800 text-white w-full px-3 py-2 mt-2"
            />
          </label>
          <label class="mb-4 text-left text-stone-400">
            Email
            <input
              v-model="email"
              type="email"
              class="bg-gray-800 text-white w-full px-3 py-2 mt-2"
            />
          </label>
          <label class="flex items-center text-white mb-4">
            <input
              type="checkbox"
              v-model="consent"
              class="mr-3"
              id="updates"
            />
            I agree to terms and conditions
          </label>
          <button
            type="submit"
            class="bg-white text-black px-6 py-2 mt-4"
            @click.prevent="submitForm"
          >
            {{ isLoading ? 'Loading...' : 'Submit' }}
          </button>
          <feedback :formFeedback="formFeedback" />
        </form>
      </div>
    </div>
  </div>
</template>

Note: We will be using the Nuxt Tailwind module for styling.

The form has 3 input fields and a submit button. Each input is modeled to a ref value and the form submit button is linked to a submitForm function.

Additionally, the button text is responsive to the isLoading value, which we will handle in the script. Finally, you can see there is the 'feedback' component which accepts the formFeedback ref value as a prop.

Nuxt3 Script Section



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

type FormFeedbackType = 'incomplete' | 'consent' | 'invalid' | 'success' | null;

const name = ref('');
const email = ref('');
const consent = ref(false);
const isLoading = ref(false);
const formFeedback: Ref<FormFeedbackType> = ref(null);
const success = ref(true);

const submitForm = async () => {
  isLoading.value = true;
  formFeedback.value = null;

  if (!name.value.trim() || !email.value.trim()) {
    formFeedback.value = 'incomplete';
    isLoading.value = false;
    return;
  }

  const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
  if (email.value && !regex.test(email.value)) {
    formFeedback.value = 'invalid';
    success.value = false;
    isLoading.value = false;
    return;
  }

  if (!consent.value) {
    formFeedback.value = 'consent';
    success.value = false;
    isLoading.value = false;
    return;
  }

  setTimeout(() => {
    // If the execution reaches here, it means that all checks have passed.
    success.value = true;
    formFeedback.value = 'success';
    isLoading.value = false;
  }, 1000);
};
</script>

The contact form component script includes ref values for each form field and state that is required for the form to function. Underneath the refs the async submitForm function which handles the validation and submission logic. In our case we are not submitting form information to an actual database so the submission status is simulated by using a setTimeout function.

As an bonus I created a new type for the formFeedback ref which only allows certain strings to get passed to the feedback component. Anything other than the options defined in the type will result in a TypeScript compile-time error.

Form Feedback Component

The feedback component accepts a single prop, named 'feedbackType', which determines the type of feedback to be displayed. Based on the value of 'feedbackType', the component renders the corresponding div. The 'feedbackType' prop can only accept specific strings, as defined by the TypeScript type associated with the formFeedback ref.



<script lang="ts" setup>
const props = defineProps({
  formFeedback: String,
});
</script>

<template>
  <div
    v-if="formFeedback === 'error'"
    class="text-white w-full block p-3 mt-4 bg-red-500"
  >
    There was an error processing your request.
  </div>

  <div
    v-else-if="formFeedback === 'success'"
    class="text-white w-full block p-3 mt-4 bg-green-500"
  >
    Thanks for signing up!
  </div>

  <div
    v-else-if="formFeedback === 'incomplete'"
    class="text-white w-full block p-3 mt-4 bg-red-500"
  >
    Please complete all required fields.
  </div>

  <div
    v-else-if="formFeedback === 'invalid'"
    class="text-white w-full block p-3 mt-4 bg-red-500"
  >
    Please enter a valid email address.
  </div>

  <div
    v-else-if="formFeedback === 'consent'"
    class="text-white w-full block p-3 mt-4 bg-red-500"
  >
    Please agree to terms and conditions.
  </div>
</template>

<style scoped></style>

This feedback component can be reused throughout your website for different forms - just make sure you update it to include different conditions.

App.vue

Maybe obvious but to be thorough, simply add the contact component to your app.vue or desired page:



<template>
  <div>
    <contact />
  </div>
</template>

Conclusion

That's it! You can now build a contact form with validation and feedback. 🎉

You can get the full code here - simply fork the project and start working on your own as needed.

How to create a contact form using Nuxt3 and Supabase

Michael Synan — Wed, 28 Jun 2023 03:34:25 +0000

Ready to create a simple contact form from scratch using Nuxt and Supabase?

Let's go. 🏃‍♀️💨

Supabase

Supabase is a great opensource alternative to Firebase that has an excellent free tier and responsive support team.

Create Table and Database

First things first, go to supabase.com and setup a free account.

Next, click "new project" from your dashboard.

Create new organization or choose existing one.

Create new project with strong database password.

Next click on the "Table Editor" icon on the left so you can create a new table with all of your contact form fields. Keeping it simple, just create an "email" field, and also please remember the name of your table since you will be referencing it in your code.

Get API Keys

Click on "settings" gear icon, then "API" in the left menu. From there you can copy down the project URL and public anon key, placing them in an env file in your project root.

SUPABASE_URL=""
SUPABASE_API_KEY=""

Nuxt3

Contact Form Template

Create your contact form.

<template>
  <div class="flex items-center justify-center h-screen bg-black">
    <div class="text-center text-white p-6 border-2 border-white w-full max-w-md">
      <h1 class="text-2xl mb-6">Join Our Newsletter</h1>
      <p class="mb-4">Get amazing updates right to your inbox.</p>
      <form @submit.prevent="submitEmail" class="flex flex-col">
        <label class="mb-4">
          Your Email Address
          <input v-model="email" type="email" class="bg-gray-800 text-white w-full px-3 py-2 mt-2" />
          <span class="text-red-500">{{ emailError }}</span>
        </label>
        <button type="submit" class="bg-white text-black px-6 py-2 mt-4">Send Message</button>
      </form>
    </div>
  </div>
</template>

Note: This form uses Tailwind CSS classes for styling.

Install the Nuxt Supabase module

For this project we will be using the Supabase Nuxt Module, which you can find here.

npm install @nuxtjs/supabase --save-dev

Add refs

const email = ref('')
const emailError = ref('')

Now create the script section

async function submitEmail() {
  const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i

  if (email.value && !regex.test(email.value)) {
    emailError.value = "Invalid email address"
    return
  } else {
    emailError.value = ""
  }

  const { error } = await client
    .from('contactForm')
    .insert([
      { email: email.value, topic: 'blog' },
    ]);

  if (error) {
    console.error("Error submitting email:", error.message);
    return;
  }

  console.log("Email submitted successfully!");
}

This async function does the following:

Basic validation that checks if email is formatted properly
Submits 'email' ref value to your Supabase table "contactForm"
Shows error or success message.

That's it! Now you have a simple contact form that is able to make submissions to a database.

Conclusion

This contact form works decently if you really just want to collect email addresses, but there are lot's of other things to consider when creating a contact form.

To name a few:

Button loading state
User feedback for error and success messages
Additional fields
CAPTCHA

If interested in a more advanced Nuxt3 contact form using Supabase please follow or comment so you can get notified when it's published. 🤓

Custom 404 Page in Nuxt

Michael Synan — Sat, 17 Jun 2023 11:59:53 +0000

How to create a custom Nuxt3 error page

NOTE: This solution is for projects using both the Layout and Page directory options in Nuxt and assumes you already have those directories set up.

If you want to skip right to the demo, see the Stackblitz here.

Step 1. First step is to create the 404 layout file inside the layout directory using the Nuxt CLI tool nuxi, as well at your error page at root.

npx nuxi add layout 404
touch error.vue

Note: please error.vue goes at root, not in pages

Step 2. Update your error page:

<template>
  <NuxtLayout name="404">
    <div>
      <div class="text-4xl">You've Arrived Here on Error, boss</div>
      <button class="font-bold button" @click="goBack">Back</button>
    </div>
  </NuxtLayout>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.button {
  padding: 4px 6px;
  margin: 10px 0px;
  background: black;
  color: white;
}
</style>

Notice, the NuxtLayout template accepts a prop allowing you to pass the name of your 404 page layout template.

Step 3. Style your layout by adding your navbar or whatever else is appropriate for your website.

Read more about Nuxt error handling here.

And if you want to learn more about NuxtLayout you can go here.

Again, you can visit the Stackblitz here: https://stackblitz.com/edit/nuxt3-custom-404?file=layouts%2F404.vue

Add Particles.js to Your Squarespace Site

Michael Synan — Thu, 15 Jun 2023 00:35:56 +0000

Particles.js background on Squarespace

Particles.js is a lightweight plugin that adds motion and interaction to your Squarespace site. You can set up a Particles.js background on your site in five steps:

Upload the Javascript file
Inject Particles.js and Javascript file into the header
Add CSS styles
Add custom code-block with target div

Let's go through each of steps.

Upload the Javascript file

First you should upload this file to your Squarespace site: https://github.com/michaelsynan/squarespace-files/blob/main/floatingMO.js

The technique uses the Mutation Observer API to make sure the necessary script doesn't load until its target div has been rendered. To upload a file to Squarespace you need to go to "pages" -> new page -> "link" -> gear icon -> "file" -> "upload file" (I know its a little unintuitive). Note the link address, which is "/s/floatingMO.js" in this case.

Inject Javascript into your Squarespace site

To inject your new Javascript file you need to go to "settings" -> "developer tools" -> "code injection", then place the following code in the header (remember to check your javasript file link):

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="/s/floatingMO.js"></script>

Add CSS Styles

"design" -> "custom CSS"

#particles-js-wrapper {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: -1;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

#particles-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    z-index: 1;
}

Add Custom Code Block

Go to the editor in your Squarespace site and add the following code block:

<div id="particles-js-wrapper">
    <div id="particles-js"></div>
</div>

It's important to note that the code above targets the div "#particles-js" - if you want to change this you should update the JavaScript GitHub file linked to above.

If you just want to play around with Particles.js outside of Squarespace, you can check out my CodePen here. Feel free to fork it and post your Pens below - I'll be sure to like and reply.

Enjoy and feel free to reach out if you have any questions!

Reveal on Scroll with Nuxt and Intersection Observer API

Michael Synan — Sun, 23 Apr 2023 09:26:37 +0000

While it's fun to add as many libraries to your project as possible (not really), sometimes it makes sense to use browser native solutions.

Enter Web Browser APIs.

One of my favorite Web Browser APIs is Intersection Observer, which provides an interface for determining if an element is located inside the viewport. This handy API has been around since 2017 and has been proven to be extremely stable and performant for aiding in such tasks as lazy loading, animations and effects, and tracking user engagement.

Using browser native solutions like the Intersection Observer API helps reduce load time and decreases the number of dependencies in your project.

You can read more about Intersection Observer here.

In this tutorial I'll demonstrate how to add Intersection Observer to your Nuxt 3 project in order to trigger a reveal on scroll CSS animation.

How Does it Work?

The Intersection Observer API works by creating a new observer instance which takes a callback function and options as its arguments. The callback function is executed whenever the target element intersects with the specified threshold in the viewport, defined in the options object. By invoking the observer's observe method and passing in the target element, you can efficiently monitor and react to its visibility changes on the page.

In order to use Intersection Observer to animate an element on scroll you'll need to use the onMounted() Vue.js hook.

To do this, simply import onMounted in the script section of your component template:



import { onMounted, ref } from 'vue';

Intersection Observer

Next, you must create your Observer instance inside of the onMounted lifecycle hook and write your desired logic for any elements that get passed back, like so:



onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-delay');
        }
      });
    },
    {
      threshold: 0.5,
    }
  );

  if (demo) {
    observer.observe(demo);
  }
});

In the example above the CSS class "animate-delay" is appended to the class list of any element being observed.
 

CSS styles

With your Observer in place, you can wrap up by adding the desired CSS animations:



.animate-delay {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: animate-delay;
}

@keyframes animate-delay {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.demo {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
}
</style>

In the demo code I added a ref to my target element called "demo" but you can use classes, IDs and any other DOM element:



<span ref="demo" class="demo">
  Intersection Observer in Action 👌
</span>

Troubleshooting

If you have any issues you can always use console.log inside of the Observer instance to check if your Observer instance is working correctly:



console.log('Observed element:', entry.target);

Live Demo

If you want to see it in action, you can check out the live demo on StackBlitz: https://stackblitz.com/edit/intersection-observer-nuxt?file=README.md

Conclusion

In conclusion, using browser native solutions like the Intersection Observer API can greatly benefit the performance of your project by reducing load time and dependencies. The Intersection Observer API provides a stable and efficient solution for triggering animations and effects on scroll. By implementing this API in your Nuxt 3 project, you can easily create some nice animations and increase website performance.