Store Landing-Page Leads without a Backend Server in Nuxt
Tags: javascript, jamstack, appwrite, nuxt
Published: 2022-08-11 20:15:00

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](https://docs.docker.com/get-docker/) 
- Appwrite instance running on our computer, check out [this article](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba) to create a local Appwrite instance; we will use Appwrite’s powerful database feature for this project
## Setting up our Nuxt app

[Nuxt](https://nuxtjs.org/) 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.**

```bash
    npm init nuxt-app <project-name>
    
    #or
    
    npx create-nuxt-app <project-name>
    
    #or
    
    yarn create nuxt-app <project-name>
```

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

```bash
    Project name: google-analytics-nuxt
```

```bash
    Programming language: JavaScript
```

```bash
    Package manager: Npm
```

```bash
    UI framework: None
```

```bash
    Testing framework: None
```

```bash
    Rendering mode: Universal (SSR/SSG) 
```

```bash

    Deployment target: Server (Node.js hosting)
```

After that, run these commands.

```bash
    cd <project name>    
    npm run dev
```

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](https://paper-attachments.dropbox.com/s_F22DDC6F8A9E63BACED9FA7A7E011649B13CCD6D40585994C06044C0C3C992F2_1642624646362_nuxtjs-index.PNG)

## Installing Appwrite

[Appwrite](https://appwrite.io/?utm_source=hackmamba&utm_medium=hackmamba-blog) 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.

```bash
    npm install appwrite
```


## 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](http://localhost/).

Go to [localhost:80](http://localhost/) 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](https://paper-attachments.dropbox.com/s_314B50E78D2533608F0DEE9BE97FEF3C5B7916B2F8CAC55559F4DCA3A07D86F6_1648400276700_Screenshot+64.png)

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](https://paper-attachments.dropbox.com/s_E9FCC16A09539977BBE06A1D26EB3F3E791D81AE781A5D221825A67EB9810FDF_1650006781387_Screenshot+101-2.png)


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


![Appwrite Console](https://paper-attachments.dropbox.com/s_E9FCC16A09539977BBE06A1D26EB3F3E791D81AE781A5D221825A67EB9810FDF_1650009259617_Screenshot+102.png)


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

```js
    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
```
## Creating the Collection and Attributes on the Appwrite Database

In the Appwrite web [Console](http://localhost/console), we click on **Database** on the left side of the dashboard.

![Appwrite Console](https://paper-attachments.dropbox.com/s_E9FCC16A09539977BBE06A1D26EB3F3E791D81AE781A5D221825A67EB9810FDF_1650006598971_Screenshot+104.png)


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](https://paper-attachments.dropbox.com/s_E9FCC16A09539977BBE06A1D26EB3F3E791D81AE781A5D221825A67EB9810FDF_1650006579537_Screenshot+105.png)


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](https://paper-attachments.dropbox.com/s_E9FCC16A09539977BBE06A1D26EB3F3E791D81AE781A5D221825A67EB9810FDF_1650009301207_Screenshot+106.png)


We create an **email** attribute of **emailAddress.**


![Appwrite Console Attribute Page](https://paper-attachments.dropbox.com/s_E9FCC16A09539977BBE06A1D26EB3F3E791D81AE781A5D221825A67EB9810FDF_1650009362291_Screenshot+107.png)

## 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](https://paper-attachments.dropbox.com/s_EE273E1E9F2E7CFF8ADE44300BC1C36BD934CED21ACE7EC59DB2984D76D51091_1656100884718_Screenshot+99-2.png)



## Adding Input Interaction with the Database

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

```vue
    <script>
      import {sdk} from '../init';
    </script>
```

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

```vue
    <script>
      import {sdk} from '../init';
      export default {
        name: 'IndexPage',
        data(){
          emailAddress: ''
        },
      }
    </script>
```

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

```vue
    <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>
```
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.

```vue
    <input 
      type="text" 
      v-model="emailAddress"
    />
    <button type="button" @click="handleEmailAddress">Add email address</button>
```

Here is how our `index.vue` file looks.

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

![Landing Index Page](https://paper-attachments.dropbox.com/s_EE273E1E9F2E7CFF8ADE44300BC1C36BD934CED21ACE7EC59DB2984D76D51091_1656101116127_Screenshot+99-2.png)

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

![Appwrite Console User](https://paper-attachments.dropbox.com/s_EE273E1E9F2E7CFF8ADE44300BC1C36BD934CED21ACE7EC59DB2984D76D51091_1656101181926_Screenshot+109.png)



## 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:

- [Getting started with Appwrite for web](https://appwrite.io/docs/getting-started-for-web)
- [Database API](https://appwrite.io/docs/client/database)
- [What is Appwrite and How to use it Efficiently](https://appwrite.io/docs/getting-started-for-web)