Store Landing-Page Leads without a Backend Server in Nuxt

Amarachi Iheanacho - Aug 11 '22 - - Dev Community

Landing page leads help businesses collect user information. This information gifts businesses a better understanding of the demographic interested in their product.

What We Will Be building

This post will discuss creating a landing page to collect and store a user’s contact information in a Nuxt application. This application does not require a custom backend server.

Github URL:

https://github.com/Iheanacho-ai/nuxt-email-leads

Prerequisites

To get the most out of this article, we require the following:

  • Basic understanding of CSS, JavaScript, and Vue.js
  • Understanding Nuxt.js would help with this tutorial, but would not be required
  • Docker Desktop installed on the computer, run the docker -v command to verify if we have docker desktop installed; if not, install it from Get Docker documentation
  • Appwrite instance running on our computer, check out this article to create a local Appwrite instance; we will use Appwrite’s powerful database feature for this project ## Setting up our Nuxt app

Nuxt is an open-source Vue.js frontend development framework that allows us to create universal web applications, render statically Vue.js applications without having a server, and enables functionalities like server-side rendering, static site generating, etc. in our project.

To create a Nuxt app, we go to our terminal and run the command below.

NOTE: Use the Powershell terminal to run these commands.

    npm init nuxt-app <project-name>

    #or

    npx create-nuxt-app <project-name>

    #or

    yarn create nuxt-app <project-name>
Enter fullscreen mode Exit fullscreen mode

Running this command will trigger a set of question prompts. Here is the setup I used.

    Project name: google-analytics-nuxt
Enter fullscreen mode Exit fullscreen mode 
    Programming language: JavaScript
Enter fullscreen mode Exit fullscreen mode 
    Package manager: Npm
Enter fullscreen mode Exit fullscreen mode 
    UI framework: None
Enter fullscreen mode Exit fullscreen mode 
    Testing framework: None
Enter fullscreen mode Exit fullscreen mode 
    Rendering mode: Universal (SSR/SSG)
Enter fullscreen mode Exit fullscreen mode 

    Deployment target: Server (Node.js hosting)
Enter fullscreen mode Exit fullscreen mode

After that, run these commands.

    cd <project name>    
    npm run dev
Enter fullscreen mode Exit fullscreen mode

This would change the directory to our project and run it on the browser. To see our app go to http://localhost:3000/

Nuxt Index Page

Installing Appwrite

Appwrite is an open-source, end-to-end, back-end server solution that allows developers to build applications faster.

To use Appwrite in our Nuxt application, we install the Appwrite client-side SDK for web applications.

    npm install appwrite
Enter fullscreen mode Exit fullscreen mode

Creating a New Appwrite Project

During the creation of the Appwrite instance, we specified what hostname and port we see our console on. The default value is localhost:80.

Go to localhost:80 and create a new account to see our console.

On our console, there is a Create Project button. Click on it to start a new project.

Appwrite Console

Our project dashboard appears once we have created the project. At the top of the page, there is a Settings bar. Click the Settings bar to access the Project ID and API Endpoint.

Appwrite Console

We copy the Project ID and API Endpoint, which we need to initialize the Appwrite Web SDK.

Appwrite Console

We create an init.js file at our project's root directory to initialize the Appwrite Web SDK with the following code.

    import { Appwrite } from 'appwrite';
    export const sdk = new Appwrite();
    sdk
      .setEndpoint('http://localhost/v1') // Replace this with your endpoint
      .setProject('projectID'); // Replace this with your ProjectID
Enter fullscreen mode Exit fullscreen mode

Creating the Collection and Attributes on the Appwrite Database

In the Appwrite web Console, we click on Database on the left side of the dashboard.

Appwrite Console

We create a collection in the database tab by clicking on the Add Collection button. This action redirects us to a Permissions page.

At the Collection Level, we want to assign a Read Access and Write Access with a role:all value. We can modify these permissions later to control who has access to read or write to our database.

Appwrite Console Permissions Page

On the right of the Permissions page, we copy the Collection ID, which we need to perform operations on the collection’s documents.

Next, we go to the Attributes tab to create the properties we want a document to have.

Appwrite Console Attributes Tab

We create an email attribute of emailAddress.

Appwrite Console Attribute Page

Creating our Landing Page

In our index.vue file, we create the landing page for collecting email leads. This landing page consists of an input element for users to input their email addresses. We store these email addresses on our Appwrite database.

The code below creates the landing page user interface.

https://gist.github.com/Iheanacho-ai/7d4178284b85dd9f9008412a62769e36

Nuxt Landing Page

Adding Input Interaction with the Database

In the script section of the index.vue file, we import the sdk instance into our file.

    <script>
      import {sdk} from '../init';
    </script>
Enter fullscreen mode Exit fullscreen mode

Next, we create an emailAddress state variable to hold the value of our input element.

    <script>
      import {sdk} from '../init';
      export default {
        name: 'IndexPage',
        data(){
          emailAddress: ''
        },
      }
    </script>
Enter fullscreen mode Exit fullscreen mode

Next, we create a handleEmailAddress to store the email addresses on our Appwrite database.

    <script>
      import {sdk} from '../init';
      export default {
        name: 'IndexPage',
        data(){
          emailAddress: ''
        },
        methods: {
          handleEmailAddress: async function(){
            try {
              await sdk.database.createDocument(collectionID', 'unique()',{
                "emailAddress": this.emailAddress
              })
              this.emailAddress= '',
              alert("Email saved successfully!")
            } catch (error) {
              console.log(error)
            }
          }
        }
      }
    </script>
Enter fullscreen mode Exit fullscreen mode

In the code block above, the handleEmailAddress function does the following:

  • Creates a new document in the database using Appwrite’s createDocument function; this function receives the collection ID we saved from the Permissions page, a unique() parameter that specifies that we want a unique document ID, and attributes values as parameters
  • Alerts us when we have successfully saved the document and then clears out the information in our emailAddress state variable
  • Logs any error we encountered to our console

We then pass the emailAddress variable to a v-model directive on the input element and the handleEmailAddress function to the Add email address button @click event listener.

    <input 
      type="text" 
      v-model="emailAddress"
    />
    <button type="button" @click="handleEmailAddress">Add email address</button>
Enter fullscreen mode Exit fullscreen mode

Here is how our index.vue file looks.

https://gist.github.com/Iheanacho-ai/f988c7cfcc14cd7cf701708deff15c93

Landing Index Page

Input an email address to see it saved on the database.

Appwrite Console User

Conclusion

This article discussed using Appwrite to create data on the database. We created a simple lead generation page in a Nuxt application.

Resources

Here are some resources that might be helpful:

Image
12 Companies That Are Leading The Way In Cryptocurrency Casino
Image
7 Things About Personal Injury Claim Compensation You'll Kick Yourself For Not Knowing
Image
What Is Everyone Talking About Self Control Wheelchair Right Now
Image
10 Life Lessons We Can Learn From Accident Lawyer Near Me
Image
10 . Pinterest Account To Be Following About Navy Asbestos Settlement
Image
Why We Love Clearwater Accident Lawyer (And You Should Also!)
Image
Mental Health Check Up Strategies That Will Change Your Life
Image
Cat Flap Installation - How to Choose and Install a Cat Flap
Image
panduan mendapati bandar slots online dapat dipercaya dan beri keuntungan
Image
The People Closest To Accident Lawyer Near Me Uncover Big Secrets
Image
24 Hours To Improve Drip Brew
Image
What Is Recessed In-Wall Electric Fireplace And Why Is Everyone Talking About It?
Image
8 Tips For Boosting Your Wall Mount Fireplace Electric Game
Image
panduan pilih permainan judi slots online yang cocok
Image
The Most Significant Issue With Asbestos Lawsuit Payouts, And How You Can Resolve It
Image
kiat taklukkan mesin slots online termudah
Image
Three Common Reasons Your Asbestos Exposure Lawsuit Isn't Working (And What You Can Do To Fix It)
Image
How To Know If You're In The Mood For Asbestos Lawyer
Image
How To Create An Awesome Instagram Video About Accident Lawyer
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .