DEV Community: Elif Nur Turk

Custom Toasters in Nuxt with Vue Toastification

Elif Nur Turk — Mon, 04 Nov 2024 09:44:35 +0000

Custom Toasters in Nuxt with Vue Toastification

Customizing Vue Toastification in Nuxt 3

In this article, we’ll explore how to integrate and customize Vue Toastification in a Nuxt 3 application. We’ll create a reusable toaster plugin and demonstrate how to trigger different types of toast notifications from your components.

Step 1: Setting Up Vue Toastification

First, ensure you have installed the Vue Toastification library in your Nuxt 3 project. You can do this using npm or yarn:

npm install @meforma/vue-toaster

yarn add @meforma/vue-toaster

Step 2: Creating the Toaster Plugin

Next, we’ll create a plugin that initializes the toaster with custom settings. Create a new file in the plugins directory (e.g., toast.client.ts):

/plugins/toast.client.ts

import { createToaster } from '@meforma/vue-toaster'
    import { defineNuxtPlugin } from '#app'

    export default defineNuxtPlugin((nuxtApp) => {
      const toaster = createToaster({
        position: 'bottom-left',
        maxToasts: 5, // Display at most 5 toasts at a time
      })
    })

Great! You’ve set up the basic integration for Vue Toastification in your Nuxt 3 project. Now, let’s dive into how you can customize the toaster to fit your specific needs.

Key Areas of Customization

Positioning
Types and Styles
Duration

1. Positioning

You’ve already set the default position to bottom-left. However, Vue Toastification offers multiple predefined positions. You can easily change this by passing a different value to the position option.

Available positions:

top-right
top-left
bottom-right
bottom-left

const toaster = createToaster({ position: 'bottom-left', // Change the position here });

2. Types, Styles, Durations

You can customize the appearance of the toasts based on the type of message (e.g., success, error, warning). You can pass custom classes to modify the toast’s look:

/plugins/toast.client.ts

   import { createToaster } from '@meforma/vue-toaster'
    import { defineNuxtPlugin } from '#app'

    export default defineNuxtPlugin((nuxtApp) => {
      const toaster = createToaster({
        position: 'bottom-left',
      })

      // Define custom toast functions
      const successToast = (message: string) => {
        toaster.show(message, {
          type: 'success',
          duration: 3000, 
          className: 'bg-green-500 text-white p-4 rounded shadow-md w-[300px] my-2',
        })
      }

      const failToast = (message: string) => {
        toaster.show(message, {
          type: 'error',
          duration: 3000,
          className: 'bg-red-500 text-white p-4 rounded shadow-md w-[300px] my-2',
        })
      }

      const warnToast = (message: string) => {
        toaster.show(message, {
          type: 'warning',
          duration: 3000,
          className: 'bg-yellow-500 text-white p-4 rounded shadow-md w-[300px] my-2',
        })
      }

      // Provide the toasts globally with types
      nuxtApp.provide('successToast', successToast)
      nuxtApp.provide('failToast', failToast)
      nuxtApp.provide('warnToast', warnToast)
    })

Usage in a Page

To display toast notifications with button actions, you can set up buttons to trigger success, error, and warning toasts. Here’s the code:

/pages/toast.vue

   <template>
      <div class="flex justify-center space-x-4 h-10">
        <button @click="$successToast('Operation was successful!')" class="bg-primary text-white px-4">Success</button>
        <button @click="$failToast('Something went wrong!')" class="bg-red-800 text-white px-4">Fail</button>
        <button @click="$warnToast('This is a warning!')" class="bg-orange-400 text-white px-4">Warn</button>
      </div>
    </template>

    <script setup>
    const { $successToast, $failToast, $warnToast } = useNuxtApp();
    </script>

For more customization,

/pages/toast.vue

    import { createToaster } from '@meforma/vue-toaster'
    import { defineNuxtPlugin } from '#app'
    import successImg from '@/assets/images/success.svg'

    export default defineNuxtPlugin((nuxtApp) => {
      const toaster = createToaster({
        position: 'bottom-left',
        maxToasts: 5, 
      })

      // toast with icon
      const successToast = (message: string) => {
        toaster.show(`
          <div class="flex items-center">
            <img src="${successImg}" alt="success" class="w-5 h-5 mr-2" />
            ${message}
          </div>
        `, {
          type: 'success',
          pauseOnHover: true, 
          duration: 3000, 
          className: 'bg-white text-xs text-gray-800 p-4 rounded shadow-md w-[300px] my-2 rounded-lg shadow-white shadow-lg',
        })
      }

      nuxtApp.provide('successToast', successToast)

    })

Conclusion

Toast notifications in Nuxt 3 provide quick, effective feedback for users. With minimal setup, you can customize and trigger success, error, or warning messages across your app. This simple integration enhances user experience and keeps interactions smooth and informative.

See you in next article!

References

https://www.npmjs.com/package/@meforma/vue-toaster

Google reCAPTCHA for Vue.js/Nuxt.js : App & Form Spam Shield

Elif Nur Turk — Thu, 17 Oct 2024 09:37:26 +0000

The Importance of reCAPTCHA in Modern Applications

In the digital age, safeguarding applications from bots and automated attacks is more critical than ever. Google’s reCAPTCHA provides a robust solution by verifying user authenticity, effectively preventing spam and protecting against brute force login attempts.

Modern reCAPTCHA versions are also much more user-friendly. Unlike older captchas that made users decipher distorted text, newer versions work silently in the background, allowing smoother user interactions while still providing strong protection.

To integrate reCAPTCHA, you need two keys: a site key and a secret key. The site key is used on the front end to display the reCAPTCHA widget, while the secret key is required on the backend to validate the token generated on frontend after user interaction.

When a user submits a form, a token will be created and sent to your backend endpoint, which communicates with Google’s API to verify the token. If the token is valid, the backend returns a confirmation (e.g., “OK”). We’ll handle only the frontend operations using the existing backend API.

vue-recaptcha-v3 is a Vue library that facilitates the integration of Google’s reCAPTCHA v3 into Vue.js applications. It enhances security by running in the background to score user interactions, effectively distinguishing between humans and bots without disrupting the user experience.

Implementing vue-recaptcha-v3 in Your Vue.js Application

Integrating vue-recaptcha-v3 into your Vue.js application involves a few straightforward steps. Here’s a guide to help you set it up, with a special focus on Nuxt.js.

Step 1: Install the Library

First, you need to install the vue-recaptcha-v3 package. Run one of the following commands in your project directory:

npm install vue-recaptcha-v3

yarn add vue-recaptcha-v3

Step 2: Obtain reCAPTCHA API Keys

Click and visit the Google reCAPTCHA admin console to register your site. You’ll receive two keys: Site Key & Secret Key. Make sure to choose reCAPTCHA v3 during registration. We will be using Site Key in the front-end.

Step 3: Create a Plugin

Next, create a new plugin file for reCAPTCHA. You can do this by creating a vue-recaptcha-v3.js file in the plugins directory:

*plugins/vue-recaptcha-v3.js*

    import { defineNuxtPlugin } from '#app'; 
    import { VueReCaptcha } from 'vue-recaptcha-v3';

    export default defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: 'YOUR_SITE_KEY', // Replace with your site key
        loaderOptions: {
          autoHideBadge: true, // Optional: Automatically hides the badge
          explicitRenderParameters: {
              //badge: 'bottomleft', //incase you don't want to hide it
          }
        }
    });
    });

Badge Appearance
The reCAPTCHA badge is visible by default on all pages, but you can customize its behavior. For instance, you can choose to hide it by enabling the autoHideBadge option.

Customizing Badge Location

You can specify the position of the reCAPTCHA badge by using the loaderOptions when configuring vue-recaptcha-v3. Here are the available badge positions:
inline: The badge is shown inline (no fixed position).
bottomright: The badge appears in the bottom-right corner of the page.
bottomleft: The badge appears in the bottom-left corner of the page.
topright: The badge appears in the top-right corner of the page.
topleft: The badge appears in the top-left corner of the page.

Step 4: Register the Plugin

Add the plugin to the plugins array in your nuxt.config.js. Here’s an example configuration,

    export default defineNuxtConfig({
      devtools: { enabled: true },
       //..

        plugins:[
            {src: '~/plugins/vue-recaptcha-v3.js', mode: 'client' },
        ],

      ..//

    })

Now we can apply it in form…

Let’s break down the implementation of reCAPTCHA in your ContactForm component step by step.

Step 1: Setup and Import

First, we import the necessary modules from vue-recaptcha-v3 and define our component:

/ContactForm.vue

    <script>
    import { VueReCaptcha, useReCaptcha } from "vue-recaptcha-v3";

    export default {
      name: "ContactForm",
      data() {
        return {
          form: {
            name: "",
          },
          submissionMessage: null,
          errorMessage: null,
        };
      },
      setup() {
        const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();

        const recaptcha = async () => {
          await recaptchaLoaded(); // Wait for reCAPTCHA to load
          return await executeRecaptcha("contact"); // Create a reCAPTCHA token
        };
        return {
          recaptcha,
        };
      },

The component imports VueReCaptcha and the useReCaptcha hook to manage reCAPTCHA.
The form object contains the user's input fields, while submissionMessage and errorMessage are used to display feedback.

Step 2: Token Creation

Next, we define the submitForm method to handle form submissions:

   methods: {
        async submitForm() {
          const token = await this.recaptcha(); // Call the recaptcha method to get the token
          console.log(token);

          // Check if the token is valid
          if (!token) {
            this.errorMessage = "Invalid reCAPTCHA. Please try again.";
            this.submissionMessage = null; // Clear previous messages
            alert(this.errorMessage);
            return; // Exit if the token is invalid
          }

The recaptcha method is called to generate a token, which is logged to the console.
If the token is not generated (invalid), an error message is displayed, and the function exits early.

Step 3: CAPTCHA Validation

Once a valid token is created, the next step is to validate it:

    try {
            // Send the token to the CAPTCHA validation API first
            const captchaResponse = await fetch(
              "https://api.x.com/api/captcha",
              {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({ recaptcha_token: token }),
              }
            );

            // If the CAPTCHA validation is successful (status 200), submit the form
            if (captchaResponse.ok) {
              console.log("response is ok");

The token is sent to your backend CAPTCHA validation endpoint using a POST request.
If the response is OK (status 200), it proceeds to prepare the form submission.

Step 4: Form Submission

If the CAPTCHA validation passes, the form data is sent:

      const formData = new FormData();
              formData.append("name", this.form.name);
              formData.append("recaptchaToken", token);

              const formSubmitResponse = await fetch(
                "https://api.x.com/api/contact",
                {
                  method: "POST",
                  body: formData,
                }
              );

              // Check if the form submission response is okay (status 200-299)
              if (formSubmitResponse.ok) {
                const result = await formSubmitResponse.json();
                this.submissionMessage = "Contact form submitted successfully!";
                alert(this.submissionMessage); // Show success alert

A FormData object is created to hold the form inputs, including the reCAPTCHA token. The form data is sent to your form submission endpoint. If the submission is successful, a success message is displayed.

Step 5: Error Handling

If either the CAPTCHA validation or form submission fails, appropriate error messages are shown:

    } else {
                const error = await formSubmitResponse.json();
                this.errorMessage = error.message || "Error submitting form.";
                alert(this.errorMessage);
                this.submissionMessage = null; // Clear previous messages
              }
            } else {
              this.errorMessage = "CAPTCHA validation failed. Please try again.";
              alert(this.errorMessage);
              this.submissionMessage = null;
            }
          } catch (error) {
            console.error("Submission error:", error);
            this.errorMessage = "An error occurred while submitting the form.";
            this.submissionMessage = null; // Clear previous messages
            alert(this.errorMessage); // Show error alert
          }

Error Handling: If there are issues with the CAPTCHA validation or form submission, the error messages are displayed, allowing users to understand what went wrong.

Step 6: Resetting the Form

Finally, the form can be reset after submission:

resetForm() { this.form.name = ""; },
Here’s the complete code for the ContactForm component, integrating reCAPTCHA for secure form submissions:

/ContactForm.vue

    <script>
    import { VueReCaptcha, useReCaptcha } from "vue-recaptcha-v3";

    export default {
      name: "ContactForm",
      data() {
        return {
          form: {
            name: "",
          },
          submissionMessage: null,
          errorMessage: null,
        };
      },
      setup() {
        const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();

        const recaptcha = async () => {
          await recaptchaLoaded(); // Wait for reCAPTCHA to load
          return await executeRecaptcha("contact"); // Create a reCAPTCHA token
        };
        return {
          recaptcha,
        };
      },

      methods: {
        async submitForm() {
          const token = await this.recaptcha(); // Call the recaptcha method to get the token
          console.log(token);

          // Check if the token is valid
          if (!token) {
            this.errorMessage = "Invalid reCAPTCHA. Please try again.";
            this.submissionMessage = null; // Clear previous messages
            alert(this.errorMessage);
            return;
          }

          try {
            // Send the token to the CAPTCHA validation API first
            const captchaResponse = await fetch(
              "https://api.x.com/api/captcha",
              {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify({ recaptcha_token: token }),
              }
            );

            // If the CAPTCHA validation is successful (status 200), submit the form
            if (captchaResponse.ok) {
              console.log("response is ok");

              // Prepare form data for submission
              const formData = new FormData();
              formData.append("name", this.form.name);
              formData.append("recaptchaToken", token); // Append the reCAPTCHA token

              // Submit the form data
              const formSubmitResponse = await fetch(
                "https://api.x./api/contact",
                {
                  method: "POST",
                  body: formData,
                }
              );

              // Check if the form submission response is okay (status 200-299)
              if (formSubmitResponse.ok) {
                const result = await formSubmitResponse.json();
                this.submissionMessage = "Contact form submitted successfully!";
                this.errorMessage = null; // Clear previous error messages
                alert(this.submissionMessage); // Show success alert
              } else {
                // Handle errors from the form submission server
                const error = await formSubmitResponse.json();
                this.errorMessage = error.message || "Error submitting form.";
                alert(this.errorMessage);
                this.submissionMessage = null; // Clear previous messages
              }
            } else {
              // Handle CAPTCHA validation error
              this.errorMessage = "CAPTCHA validation failed. Please try again.";
              alert(this.errorMessage);
              this.submissionMessage = null;
            }
          } catch (error) {
            console.error("Submission error:", error);
            this.errorMessage = "An error occurred while submitting the form.";
            this.submissionMessage = null; // Clear previous messages
            alert(this.errorMessage); // Show error alert
          }
        },
        resetForm() {
          this.form.name = "";
        },
      },

     beforeUnmount() {
      this.$recaptcha.destroy();
      },
    };

    </script>

" Please note that reCAPTCHA may not function correctly on localhost. It's recommended to test it in a deployed environment. "

Conclusion

By implementing this step-by-step guide, you’ve successfully integrated reCAPTCHA into your form component. This not only enhances the security of your form submissions but also ensures a smooth and transparent user experience.

“Let’s hope the bots can’t outsmart this reCAPTCHA — if they do, I’ll need to write a new article to fool them! Until then, stay secure.”

See you in next article!

Elif Nur Türk

References

Simple Authentication for Nuxt.js (JSON Web Token + Local Storage)

Elif Nur Turk — Mon, 30 Sep 2024 09:26:15 +0000

Basic Authentication for Nuxt.js (JSON Web Token + Local Storage)

When developing a web application, ensuring security is essential. In this guide, we’ll explore how to set up a secure authentication flow using Prisma ORM and JSON Web Tokens (JWT) in NUXT 3 projects...

We'll implement a login mechanism that verifies user credentials and generates a JWT token. This token will be saved in localStorage, allowing the user to stay logged in across sessions. There will be two layouts in our application: a login layout for users who are not authenticated and a default layout for authenticated users.

Middleware will check for the presence of a valid token in localStorage on each request, ensuring users without a token are redirected to the login page. Logging out will be straightforward simply clearing the token from localStorage will log the user out and redirect them to the login page.

By following this approach, you’ll implement a basic bearer authentication system in your web application with server & client side guide. If you already have an API endpoint that provides a token upon successful login, you can skip the server-side setup and focus directly on the front-end operations.

Let’s start!

Server-Side setups

Assuming you’ve already set up Prisma and connected your database (or with any ORM tool), it’s time to refine your user model,

model Users { Id Int @id @default(autoincrement()) Username String @unique Password String CreatedAt DateTime @default(now()) }
run the necessary migrations, create an user. The folder architecture will be like;
| components/ | layouts/ | middleware/ | pages/ | prisma/ | |- schema.prisma/ | server/ | |- api/ | | |- auth/ | | | |- login.post.js |- app.vue |- nuxt.config.ts |- package.json

Let’s install required packages that “bcrypt” “jsonwebtoken” “jwt-decode”

npm install bcrypt jsonwebtoken jwt-decode

or

yarn add bcrypt jsonwebtoken jwt-decode

You can create your own JWT token with a help of JWT token generator. The content of token is totally up to you.

/server/api/auth/login.post.js


    import { PrismaClient } from '@prisma/client';
    import bcrypt from 'bcrypt';
    import jwt from 'jsonwebtoken';

    const prisma = new PrismaClient();
    const JWT_SECRET = 'your_token'; // Replace with your secret key

    export default defineEventHandler(async (event) => {
      const { username, password } = await readBody(event);

      // Find the user in the database
      const user = await prisma.users.findUnique({
        where: { Username: username }
      });

      if (!user) {
        return { statusCode: 401, body: { success: false, message: 'Invalid username or password' } };
      }

      // Check if the password is correct
      const validPassword = await bcrypt.compare(password, user.Password);

      if (!validPassword) {
        return { statusCode: 401, body: { success: false, message: 'Invalid username or password' } };
      }

      // Create a JWT token
      const token = jwt.sign(
        { id: user.Id, username: user.Username }, 
        JWT_SECRET, 
        { expiresIn: '12h' } // Token expires in 12 hour
      );


      // Return the token to the frontend
      return { 
        statusCode: 200, 
        body: { 
          success: true, 
          message: 'Login successful', 
          token 
        } 
      };
    });

This handler performs several key tasks: it first extracts the username and password from the request body, then queries the database to locate the user with the specified username. It verifies the provided password against the hashed password stored in the database. Upon successful validation, it generates a JSON Web Token (JWT) with a 48-hour expiration and returns this token to the frontend for subsequent authentication. If the credentials are invalid, it responds with a 401 status code and an appropriate error message.

Let’s fix nuxt.config.ts and check the API if it works.
export default defineNuxtConfig({ ... server: { proxy: { '/api': 'http://localhost:3000' // Adjust the port if your backend server is running on a different port }, router: { base: '/api' }, }, router: { middleware: ['auth'] }, ... });

And the Postman response be like,

It works well!

Client-Side Setups:

We can start by revisiting the file structure. With Prisma and server files already set up, the next steps involve defining layouts, forms, pages, and middleware. Let’s begin with setting up the two layout files.

/layouts/default.vue

    <template>
      <div v-if="isAuthenticated">
        <!-- You can add header footer sidebars etc. --> 
        <NuxtPage />
        <DialogWrapper />
      </div>
      <div v-else>
        <p>Loading...</p>
      </div>
    </template>

    <script setup>
    import { ref, onMounted } from "vue";
    import { useRouter } from "vue-router";
    import { DialogWrapper } from "vue3-promise-dialog";

    const router = useRouter();
    const isAuthenticated = ref(null); // Use null to distinguish between loading and not authenticated

    onMounted(() => {
      const token = localStorage.getItem("authToken");
      if (token) {
        isAuthenticated.value = true;
      } else {
        isAuthenticated.value = false;
        router.push("/login");
      }
    });
    </script>

*/layouts/login.vue*

You can hide all the side bars, panels, pages, header and footer if user is not authenticated.

<template>
  <div>
    <NuxtPage />
    <DialogWrapper />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { DialogWrapper } from "vue3-promise-dialog";
const router = useRouter();
const navigateToRoute = (route) => {
  router.push(route);
};
</script>

*/app.vue*

<script setup>
import { useRouter } from "vue-router";
import { DialogWrapper } from "vue3-promise-dialog";
const router = useRouter();
const navigateToRoute = (route) => {
  router.push(route);
};
</script>

*/pages/index.vue*

    <template>
      <section>
        <div class="block">
          <h1>
            Welcome to your Web App!
          </h1>
          <button 
             @click="logout">Logout
          </button>
        </div>
      </section>
    </template>
    <script>
    export default {
      methods: {
        logout() {
          // Remove the auth token from localStorage
          localStorage.removeItem("authToken");
          // Redirect the user to the login page
          this.$router.push("/login");
        },
      },
    </script>

/pages/login.vue


    <template>
      <section>
        <div >
          <LoginForm />
        </div>
      </section>
    </template>
    <script>
    definePageMeta({
      layout: "login",
    });
    export default {};
    </script>

Page setups are completed! We can now proceed with implementing the login functionality. A crucial step is to extract the token from the login response and store it in local storage. This ensures that the token is available for authenticating future requests.

/components/LoginForm.vue


    <template>
      <div>
        <form @submit.prevent="signIn">
            <div>
              <label for="username">Username</label
              >
              <input
                type="text"
                id="username"
                v-model="Username"
                required
                class="w-full"
              />
            </div>
            <div>
              <label for="password">Password</label
              >
              <input
                type="password"
                id="password"
                v-model="Password"
                required
                class="w-full"
              />
            </div>
            <button
              type="submit"
              class="w-full"
            >
              Sign in
            </button>
          </form>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          Username: "",
          Password: "",
        };
      },

      methods: {
        async signIn() {
          try {
            const response = await fetch("/api/auth/login", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                username: this.Username,
                password: this.Password,
              }),
            });

            const data = await response.json();
            if (data.statusCode === 200) {
              // Set the token in local storage
              localStorage.setItem("authToken", data.token);
              alert("Login is successful");
              this.$router.push("/");
            } else {
              console.log("Login failed:", data.message);
              alert("Username or password is invalid");
            }
          } catch (error) {
            console.error("Error during login:", error);
            alert("Error during login. Please try again.");
          }
        },
      },
    };
    </script>

Time for middleware/auth.js file. Essentially, it ensures that only users with a valid token can access to some pages of the application.

/middleware/auth.js

    //middleware/auth.js

    import * as jwtDecode from 'jwt-decode';

    export default defineNuxtRouteMiddleware((to, from) => {
      const token = localStorage.getItem('authToken');

      if (token) {
        try {
          const decodedToken = jwtDecode(token);
          const currentTime = Date.now() / 1000;

          if (decodedToken.exp < currentTime) {
            localStorage.removeItem('authToken');
            return navigateTo('/login');
          }
        } catch (error) {
          // Handle token decoding error
          localStorage.removeItem('authToken');
          return navigateTo('/login');
        }
      } else if (to.name !== 'login') {
        return navigateTo('/login');
      }
    });

This middleware function handles JWT authentication by:

Retrieving the JWT token from localStorage.
Decoding and verifying the token’s expiration.
If expired, it removes the token and redirects to the login page.
If decoding fails, it also removes the token and redirects to the login page.
Redirecting unauthenticated users to the login page if no valid token is found.
In essence, it ensures only users with a valid, non-expired token can access protected routes.

However, it’s important to note that this setup only addresses front-end authentication. If your application has server-side endpoints for managing user sessions or access control, you’ll need to implement additional server-side middleware to handle API safety.

See you in next article!

Configuring .env file remotely on your VPS

Elif Nur Turk — Mon, 30 Sep 2024 09:18:29 +0000

Configuring .env file remotely on your VPS

The .env file typically holds sensitive information such as API keys, database credentials, and configuration settings. This file should be created and managed securely to ensure your application's proper operation.

Access your VPS and navigate to the directory

`cd /path/to/your/directory`

Let’s create an .env file in directory.

vi .env

This command will generate a .env file in your specified directory.
To edit the file, simply execute the command "i".

i
Afterward, you can paste your environment variables directly into the file.

To save and exit, press Esc and then run the appropriate command.

:wq

Now its saved. You can then rebuild your application and restart the VPS server to apply the changes.

How to Connect GitHub Repo to VPS Server

Elif Nur Turk — Mon, 30 Sep 2024 09:17:41 +0000

How to Connect GitHub Repo to VPS Server

Connecting your GitHub repository to a Virtual Private Server (VPS) allows you to deploy code, automate deployments, and maintain seamless updates. This article will guide you through the process, assuming you have basic knowledge of Linux, SSH, and Git.

Prerequisites

Before we begin, ensure you have the following:

Access to your VPS
A GitHub repository
Git Installing and configuration

1. Access To Your Virtual private server (VPS)

To connect to your VPS, you’ll need to use an SSH (Secure Shell) client. One of the most popular SSH clients for Windows is PuTTY. This tool allows you to securely connect to your server and execute commands remotely. You can use any SSH/Telnet software.

Open the terminal and enter the domain URL.

Let’s launch the terminal to handle authentication.

After successfully verifying your username and password, navigate to the /www/var directory or the designated directory where the code will be installed. Use the appropriate command to access this directory.

cd /path/to/your/directory

Next, you can proceed to install Git within that directory.

sudo apt update
sudo apt install git

Let’s verify that Git has been installed correctly without any issues.

git --version

Congratulations, your VPS server is now fully set up!

2. Get and Install the githup repository

Obtain the repository URL from GitHub to clone it onto your server machine.

Now, we can continue the cloning process from where we left off.
git clone git@github.com/username/repository.git git init

Do not forget to add .env key incase you use it because it will not be auto installed. < This article > may help you.

If uyou already had a project file in directory but not installed with git you can run this command to connect project source to your github repo,

You can replace “main” with your own branch name

`git remote add origin https://github.com/your-username/your-repository.git
git pull origin main `

Once the repository is cloned, navigate to the project directory and proceed with the initial build. Depending on your project’s setup, you may use one of the following commands to install dependencies, build and start the application.

Once you have cloned a repository, you can use git pull to retrieve and merge any new changes from the remote repository into your local copy directory.

You can replace “main” with your own branch name

`git pull origin main`

Remember to rebuild your application and restart the VPS server every time you pull new changes from the repository. This ensures that your updates are applied correctly and your application is running the latest version.

By following these practices, you’ll maintain a robust and efficient development workflow, keeping your application up-to-date and running smoothly on your VPS.

Thank you for following along, and happy coding!

Json Lottie Animations & Custom Error Pages in Nuxt

Elif Nur Turk — Sat, 28 Sep 2024 12:14:22 +0000

Json Lottie Animations & Custom Error Pages in Nuxt

We’re going to take our 404 Not Found CSE error page to the next level with Lottie animations. Here’s how you can do it, step by step.

What is Lottie?

Lottie animations are lightweight and scalable, making them ideal for web use. These animations can include complex vector graphics and are highly efficient in terms of performance compared to traditional image or GIF animations. Lottie files are also interactive and customizable, making them a powerful tool for web designers and developers.

Using Lottie Animations in Vue Nuxt Projects with vue3-lottie

Integrating Lottie animations into Vue and Nuxt projects is straightforward with the help of the vue3-lottie library. This library provides a simple and efficient way to render Lottie animations in Vue 3 applications.

Step-by-Step Guide to Using Lottie Animations in Vue/Nuxt Projects

Installing vue3-lottie

Let’s install the vue3-lottie package to our exist project.

npm install vue3-lottie@latest
yarn add vue3-lottie@latest
pnpm add vue3-lottie@latest

Importing vue3-lottie

Create a folder called plugins at the root of your project and rifght after create a file named Vue3Lottie.client.ts inside the plugins directory.

Also let’s add our error.json animated lottie to our assetsfolder under the animations folder.

| assets/
| |- animations/
| | |- error.json
| pages/
| |- index.js
| plugins/
| |- Vue3Lottie.client.ts
|- app.vue
|- error.vue
|- nuxt.config.ts
|- package.json

Add the following code to the file.

./plugins/Vue3Lottie.client.ts

    import { Vue3Lottie } from 'vue3-lottie'
    export default defineNuxtPlugin((nuxtApp) => {  
    nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie)})

Now let’s use the our animation in our error.vue page!

error.vue

    <template>
      <div class="text-center">
        <h1 class="text-6xl">404</h1>
        <h2 >Page Not Found</h2>
        <ClientOnly>
          <Vue3Lottie :animation-data="animation" :height="height" :width="width" />
        </ClientOnly>
        <button @click="redirect" class="text-3xl">Back to menu</button>
      </div>
    </template>

    <script >
    import { Vue3Lottie } from "vue3-lottie";
    import NotFound from "/assets/animations/error.json";

    export default {
      components: { Vue3Lottie },
      data() {
        return {
          animation: NotFound,
          height: 500,
          width: 1300,
        };
      },
      methods: {
        redirect() {
          window.location.href = "/";
        },
        error() {
          return useError();
        },
      },
    };
    </script>

And the output be like,

Let your creative mind to explore new possibilities!

See you in the next article!

References

https://vue3-lottie.vercel.app/introduction/nuxt-3

Exploring Server-Side Rendering and Database Operations in Nuxt.js with Prisma ORM

Elif Nur Turk — Fri, 27 Sep 2024 11:45:57 +0000

Exploring Server-Side Rendering and Database Operations in Nuxt.js with Prisma ORM

Nuxt.js, a powerful Vue.js framework and with the release of Nuxt 3, the framework has doubled down on its commitment to server-side rendering (SSR).

In this article, we’ll delve into the world of server-side coding with Nuxt 3. We’ll explore what server-side rendering means in the context of Nuxt 3, how to leverage it effectively in your projects. If you are looking for an upgrade in Nuxt 3, this guide will equip you with the knowledge and tools you need to harness the full potential of server-side coding in your Vue applications.

Assuming you already have a database connection established through Prisma ORM, we’ll dive into leveraging the power of Nuxt 3’s server-side rendering capabilities alongside Prisma’s robust data modeling features. Underlined sentences will take you to the relevant article. If you haven’t set up Prisma ORM yet, don’t worry; integrate Prisma ORM into your existing project simply follow the instructions in the Prisma documentation to get started with setting up your database connection and generating your Prisma client.

No matter which database you use, the process will remain the same unless you have the DATABASE_URL in your .env file. Once you have your Prisma folder and schema.prisma file configured, we’ll proceed with defining our models to facilitate smooth data management within our Nuxt 3 application. We will read the outputs via Postman.

The folder architecture will primarily resemble;

    | assets/
    | components/
    | pages/
    | prisma/
    | |- schema.prisma/
    | public/
    | server/
    | |- api/
    |- app.vue
    |- nuxt.config.ts
    |- package.json
    |- yarn.lock
    |- README.md
    |- tsconfig.json

This is the Prisma model creation process. We’ll employ this model to define all CRUD operations.

/prisma/schema.prisma

` generator client {
provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Users {
  Id       Int      @id @default(autoincrement()) // Primary key
  Name     String
  Surname  String
  Email    String   @unique
  CreateAt DateTime @default(now())          
}`

Now you can migrate your model into your database on terminal.

We’re transitioning to Nuxt 3 server-side rendering. Let’s begin by setting up the following folder structure. We’ll implement functionalities to create, update, and delete users, as well as display them individually by their IDs. We’ll utilize HTTP methods to perform these CRUD operations directly through API endpoint URLs.

To prevent repetition of the Prisma import in every server file, we’ve created a prisma.js file in the util directory. Within it, we place the following code. This way, there's no need to repeatedly import Prisma in each server file.

/server/utils/prisma.js

   import { PrismaClient } from '@prisma/client';

    const prisma = new PrismaClient();

    export default prisma;

We’ve streamlined the process by directly importing utils in Nuxt. You won’t find the need to configure routes in any config file.

We’ll provide detailed documentation for each file, including its code and the corresponding output we’ve verified using Postman. Lets start!

/server/api/users.get.js

  // Event handler for DELETE request to delete a user
    export default defineEventHandler(async () => {
        try {
        const users = await prisma.users.findMany();
        return users;   
        } catch (error) {
          // Return error if fetching users fails
          return {
            status: 500,
            body: { message: 'Failed to fetch users' }
          };
        }
    });

There is all users over there

/server/api/users.post.js

    export default defineEventHandler(async (event) => {
      const { Name, Surname, Email } = await readBody(event)

      const user = await prisma.users.create({
        data: {
          Name, Surname, Email
        },
      })
      return user
    })

In Postman, ensure to include the necessary body information for posting data, then select the POST method from the dropdown menu located at the top left corner. After the Post method, it will return the new created user.

Now, we can initiate the usage of CRUD operations targeting specific user IDs. Make the postman method get again and see the user with id “1”

/server/api/users/[id].get.js


    export default defineEventHandler(async (event) => {
      const user = await prisma.users.findUnique(({
        where: {
          Id: parseInt(event.context.params.id)
        },
        //include: { author: true }
      }))
      return user;
    });

Lets delete the test user back now. We choose the method “DELETE” and add user id the URL

/server/api/users/[id].delete.js

    export default defineEventHandler(async (event) => {
        const user = await prisma.users.delete(({
          where: {
            Id: parseInt(event.context.params.id)
          },
          //include: { author: true }
        }))
        return user;
      });

Let’s see how the change the user data via “PUT” method.

/server/api/users/[id].put.js



    export default defineEventHandler(async (event) => {
        const body = await readBody(event)
        const name = body.Name
        const surname = body.Surname
        const email = body.Email

        const updateUser = await prisma.users.update({
          where: {
            Id: parseInt(event.context.params.id)},
            data: {
                Name: name,
                Surname: surname,
                Email: email,
              },
        });
        return updateUser;
    });

We’re injecting the “fresh data” into the body tag, just like we do when drafting models. Before and after send operation.

You can either update all variables with new data or choose to update only the name. Any changes made in the body tag content will affect the existing data.

In this article, I outlined the foundational structure and shared some essential insights into crafting a server using Nuxt. My aim is to provide valuable assistance to developers keen on advancing in this field.

And if you’re ready to dive into the code, I’ve got the full repo waiting for you right **here**. Explore and experiment!”

“In the grand canvas of the big picture, embark on a journey of painting each detail.”

See you in next article, happy coding!

References

*https://github.com/elifnurturk/nuxt-server

Custom Text Font Usage in Nuxt.js with Tailwind CSS

Elif Nur Turk — Wed, 25 Sep 2024 13:39:36 +0000

Custom Text Font Usage in Nuxt.js with Tailwind CSS

By integrating custom fonts into your Nuxt.js project, you can make your web application truly stand out. Tailwind CSS, known for its utility-first framework, simplifies this process, making it both efficient and effective. This article will take you through the steps to effortlessly incorporate custom fonts into your Nuxt.js project using Tailwind CSS.

Assuming you’ve already set up Tailwind CSS in your project, the next step is integrating custom fonts to elevate your design. Custom fonts can transform the look and feel of your Nuxt.js application, adding a unique touch that sets it apart.

For this article, we'll be using the eye-catching Dirty Headline 2 font. To get started, you'll need to download the font from your browser in ZIP format. Once downloaded, extract the "Dirty Headline.ttf" file from the ZIP archive. This font will add a unique flair to our project, ensuring our typography stands out with a bold and distinctive style.

Let’s create the following folders into the assets folder;

-assets/css/font.css

-assets/fonts/

To incorporate the DirtyHeadline.ttf font file into project pull it to assets/font folder and create a font.css file to define the @font-face rule for this font.

/assets/css/font.css

    @font-face {
        font-family: 'Dirty Headline 2';
        src: url('~/assets/fonts/DirtyHeadline.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
      }

Let’s integrate this font into your nuxt.config.ts and tailwind.config.js files.

nuxt.config.ts

    export default defineNuxtConfig({
      css: ['@/assets/css/fonts.css'],
    })

tailwind.config.ts

    /** @type {import('tailwindcss').Config} */

    export default {
      theme: {
        extend: {
          fontFamily: {
            'dirty-headline': ['"Dirty Headline 2"', 'sans-serif']
          }
        }, 
      },
     }

So, we can try the new font in our vue pages!

pages/index.vue

    <template>
      <div>
        <h1> class="font-dirty-headline">The Dirty Font!</h1>
      </div>
    </template>

Here we go

See you in next article!

I18n Localization for Nuxt.js ! Implement multi-language support to website.

Elif Nur Turk — Wed, 25 Sep 2024 06:36:41 +0000

I18n Localization for Nuxt.js ! Implement multi-language support to website.

Understanding I18n Localization in Nuxt 3

In today’s interconnected world, creating web applications that cater to users from diverse linguistic backgrounds is paramount. Whether you’re building a personal blog or a large-scale enterprise platform, ensuring your content is accessible and understandable to users worldwide is crucial. This is where Internationalization (I18n) and Localization come into play. With the release of Nuxt 3, the process of implementing I18n localization has been streamlined, making it easier than ever to reach a global audience.

What is I18n Localization?

I18n, short for “Internationalization,” is the process of designing and developing software applications that can adapt to various languages and cultural contexts without engineering changes. Localization, on the other hand, refers to the adaptation of a product, application, or content to meet the language, cultural, and other requirements of a specific target market or locale. Together, I18n and localization ensure that your web application is not only available in different languages but also culturally relevant and sensitive.

Nuxt 3: Simplifying Localization

Nuxt 3, the latest iteration of the popular Vue.js framework, comes with built-in support for I18n localization, making it easier for developers to create multilingual applications. Let’s delve into how Nuxt 3 simplifies the process:

Configuration-driven Approach

Nuxt 3 adopts a configuration-driven approach for I18n localization. Developers can define locales, language-specific content, and other localization-related settings directly in the Nuxt configuration file (nuxt.config.js), eliminating the need for additional plugins or complex setups.

Locale-based Routing

With Nuxt 3, creating locale-based routes is seamless. Developers can define routes specific to each language/locale, allowing users to navigate the application in their preferred language effortlessly. Nuxt automatically handles route generation and navigation based on the user’s selected locale.

Component-level Localization

Nuxt 3 enables component-level localization, empowering developers to create reusable UI components that adapt to different languages and locales seamlessly. This granular approach to localization enhances code reusability and maintainability while ensuring a consistent user interface across language variations.

Getting Started with Nuxt 3 Localization

Here’s a simplified guide to getting started:

Install I18n in Nuxt 3: Begin with installing I18n in your exist project by using npm, yarn or pnpm

npm install @nuxtjs/i18n --save-dev
yarn add --dev @nuxtjs/i18n
pnpm add -D @nuxtjs/i18n

Upon completion of the installation process, it is recommended to remove the package-lock.json and yarn.lock files. Subsequently, reinstallation of dependencies should be carried out to ensure a clean and consistent environment. And Let’s check the package.json to see.

{
  "devDependencies": {
      "@nuxtjs/i18n": "^8.0.0"
  }
}

Following the dependency setup, the creation of the “locale” folder and language-specific JSON files can commence, facilitating the localization process.

Configure Localization: Define locales, language-specific content, and other localization settings in the nuxt.config.ts file:

    export default defineNuxtConfig({
      modules: ['@nuxtjs/i18n'],
      i18n: {
        // Module Options
        lazy: true,
        langDir: "locales", 
        strategy: "prefix_except_default",
        defaultLocale: "en", // Default Language
        locales: [
            { code: "tr", iso: "tr-TR", file: "tr.json"},
            { code: "en", iso: "en-US", file: "en.json" },
        ],
      }
    })

Create Language-specific Content: Organize language-specific content in separate JSON files under the locales directory:

./locales/en.json

  {
        "helloWorld" : "Hello World"
    }

./locales/tr.json

 {
        "helloWorld" : "Merhaba Dünya"
    }

Finally, now we can use only 1 variable name for 2 language support.


    <div>
      {{ $t("helloWorld") }}
    </div>

Output be like, for www...com/ and www...com/tr/

I18n localization is no longer a daunting task, thanks to the advancements in frameworks. By embracing a configuration-driven approach, dynamic content translation, and integrated tooling, Nuxt 3 simplifies the process of creating multilingual applications.

By following these steps, you can leverage the power of Nuxt 3 to create fully localized web applications that resonate with users worldwide.

See you in next article!

References

https://i18n.nuxtjs.org/docs/getting-started

Building Scalable Web Designs with Nuxt Layouts

Elif Nur Turk — Tue, 24 Sep 2024 06:32:44 +0000

Building Scalable Web Designs with Nuxt Layouts

Layouts play a crucial role in creating scalable web designs by providing reusable, consistent structures across pages, which helps in maintaining and scaling your application as it grows. Layouts in Nuxt provide a reusable structure for your pages, allowing you to define headers, footers, sidebars, or any other common components in one place. This article will walk you through how to use layouts in Nuxt and how they can streamline your development process.

Why Use Layouts?

In large applications, certain elements such as navigation bars, footers, or sidebars tend to appear on multiple pages. Instead of repeating these components in each page file, Nuxt layouts allow you to centralize them, reducing redundancy and improving maintainability. With layouts, you can:

Reduce Code Duplication: Common structures like headers and footers can be defined once and used throughout multiple pages.
Improve Readability: By separating page content from the layout structure, your code becomes more modular and readable.
Increase Flexibility: You can define multiple layouts and assign them to different pages or sections of your app, giving you the flexibility to create unique designs while maintaining consistency.

Creating Layouts in Nuxt

By default, Nuxt provides a default layout that wraps around your pages, but you can easily create custom layouts to suit your needs.

Step 1: Define a Layout

To create a new layout, you need to add a layout file to the layouts/ directory in your Nuxt project. If the layouts/ folder doesn’t exist yet, create one.

For example, let’s create a layout called default.vue:

| assets/
| layouts/
|- default.vue
|- admin.vue
| components/
|- Header.vue
|- Footer.vue
|- Sidebar.vue
| pages/
|- index.js
| public/
|- app.vue
|- nuxt.config.ts
|- package.json

/layouts/default.vue

    <template>
      <div>
        <Header />
        <slot></slot>
        <Footer />
      </div>
    </template>

/layouts/admin.vue

    <template>
      <div>
        <Sidebar />
        <slot></slot>
      </div>
    </template>

We can now efficiently apply layouts to pages, ensuring a consistent and organized structure throughout the application.

/app.vue

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

/pages.index.js

    <template>
      <div>
        <p>This is the main page.</p>
      </div>
    </template>
    <script setup>
    definePageMeta({
      layout: "default",
    });
    </script>

and for the admin pages,

    <template>
      <div>
        <p>This is the main page.</p>
      </div>
    </template>
    <script setup>
    definePageMeta({
      layout: "admin",
    });
    </script>

Conclusion

Layouts in Nuxt are a powerful way to create reusable, consistent structures across your application, making your code more modular and maintainable. By defining common components like headers and footers in layouts, you can streamline your page development, improve flexibility, and keep your application organized.

Whether you’re working on a small personal project or a large-scale application, leveraging layouts in Nuxt will help you manage your UI and design efficiently with features like dynamic layouts, slot support, and ease of setup.

See you in next article!

nuxtjs #vue.js #layouts #web #webdevelopment

Exploring Server-Side Rendering and Database Operations in Nuxt.js with Prisma ORM

Elif Nur Turk — Fri, 23 Aug 2024 07:30:33 +0000

Exploring Server-Side Rendering and Database Operations in Nuxt.js with Prisma ORM