How to Event Stream Data from Your Nuxt.js App Using RudderStack

RudderStack is an open-source Customer Data Pipeline that enables you to track events from your web, mobile, and server-side sources and send them to your whole customer data stack in real-time. We have also open-sourced our primary GitHub repository - rudder-server.

This blog is a guide that will help you to easily integrate your Nuxt.js app with RudderStack using our JavaScript SDK. This integration allows you to track real-time user events and send them to your preferred destinations.

You can instrument event streams on your Nuxt.js app using the following three key steps:

Integrate Nuxt.js app with RudderStack JavaScript SDK and set up the tracking code
Set up a tool or warehouse destination in RudderStack to route all the event data in real-time
Deploy your Nuxt.js app and verify the event stream

Pre-Requisites

We assume you have installed and set up your Nuxt.js app. If you haven’t, visit the official Nuxt.js documentation to get started.

Step 1: Integrating Your Nuxt.js app with RudderStack JavaScript SDK

Creating a Source in RudderStack

First, you will need to set up a JavaScript source in your RudderStack dashboard that you will use to track events from your Nuxt.js app. Follow these steps to set up the source:

Log into your RudderStack dashboard. (If you’re new to RudderStack, sign up here)
On successful login, you should see the following dashboard:

RudderStack Dashboard

Make a note of the Data Plane URL. You will need this URL to integrate your Nuxt.js app with RudderStack.

Data Plane URL

Next, create a Source by simply clicking on the Add Source button. You can also click on the Directory option in the left nav bar and select Event Streams under Sources, as shown. Then, select JavaScript.

Add Source

Assign a name to your Source and click on Next.

Name Your Source

Your JavaScript source is now configured and ready to track events. Note the Write Key associated with this source. You will need it to set up the RudderStack integration with your Nuxt.js app.

Integrating Your Nuxt.js app with RudderStack

Integrate RudderStack with your Nuxt.js app and set up the tracking code following steps given below:

Modify the nuxt.config.js file in your app’s folder to include the following script:

JAVASCRIPT
script: [
      {
        hid: 'Rudder-JS',
        src: 'http://cdn.rudderlabs.com/v1/rudder-analytics.min.js',
        defer: true
      },
      {
        hid: 'rudder-js',
        innerHTML: `
        rudderanalytics = window.rudderanalytics = [];
        var  methods = [
            'load',
            'page',
            'track',
            'identify',
            'alias',
            'group',
            'ready',
            'reset',
            'getAnonymousId',
            'setAnonymousId'
        ];
        for (var i = 0; i < methods.length; i++) {
              var method = methods[i];
              rudderanalytics[method] = function (methodName) {
                    return function () {
                                       rudderanalytics.push([methodName].concat(Array.prototype.slice.call(arguments)));
                    };
                  }(method);
        }
        rudderanalytics.load("YOUR_WRITE_KEY", "DATA_PLANE_URL");
        rudderanalytics.ready(()=>{
          console.log("We are all set");
        });
        //rudderanalytics.page();
        `,
        type: 'text/javascript',
        charset: 'utf-8'
      }
    ],

Update the nuxt.config.js file

Important: You can refer to our sample Nuxt.js app present in our RudderStack Nuxt.js repository for more information on modifying these files.

Step 2: Creating a Destination Tool in RudderStack for Routing Your Nuxt.js app Events

RudderStack supports over 80 third-party tools and platforms to which you can securely send your tracked events. In this tutorial, we will route the Nuxt.js app events to Google Analytics. To add Google Analytics as a destination in RudderStack, follow the steps given below:

In the left navigation bar of your Rudderstack dashboard, click on Destinations and select Add Destination. Since we have already configured a source, you can simply click on the source and click on the Add Destination option, as shown:

Note: You can use Connect Destinations option if you have already configured a destination in RudderStack and want to send your event data to that platform.

Add Destination

Next, choose Google Analytics as your Destination.

Select Google Analytics

Add a name to your destination and click on Next, as shown:

Enter Destination Name

Now, connect the JavaScript source that we have already configured for this tutorial.

Select JavaScript as Source

In the Connection Settings, configure your Google Analytics destination with your Google Analytics Tracking ID and other optional settings, as shown below. Then, click on Next.

Configure Google Analytics Tracking ID

You can also transform your events before sending them to Google Analytics. For more information on this feature, check out our documentation on User Transformations.
Voila! Google Analytics is now configured as a destination. You should now see the following source-destination connection in your dashboard:

Source-Destination Connection

(Alternate) Step 3: Create a Warehouse Destination in RudderStack for Your Nuxt.js app Events

Important: Before you configure a data warehouse as a destination in RudderStack, you will need to set up a new project in your data warehouse. Also, you need to create a new RudderStack user role with the relevant permissions.

Follow our docs to get detailed and step-by-step instructions on how to do it for your preferred data warehouse.

We will set up a Google BigQuery warehouse destination for this tutorial to route all the events from our Nuxt.js app. You can set up a BigQuery project with the required permissions for the service account by following our documentation.

Once you have set up the project and assigned the required user permissions, follow these steps:

From the Destinations Directory, select Google BigQuery:

Select Google BigQuery as a Destination

Add a name to your Destination and click on Next.

Add Destination Name

Connect to JavaScript source from which we will track our Nuxt.js app events. Then, click on Next.

Choose the JavaScript Source

Specify the Connection Credentials. Enter the BigQuery Project ID and the Staging Bucket Name. You can refer to these instructions to get this information.

Specify the Connection Credentials

Lastly, copy the contents of the private JSON file. Find more information on how to do this in our documentation.

That’s all! You have successfully set up BigQuery as a warehouse destination in RudderStack.

Step 3: Deploying Your Nuxt.js app and Verifying the Event Stream

Summary

Monitoring in-app data is crucial to understand the real performance of your app and the user behavior. The insights you gain from this monitoring enable you to update your app to your customers’ needs. Continuously adapting your app to maintain likeability is an important trait of a successful app. RudderStack helps you achieve this securely.

In this tutorial, we learned how to instrument real-time event data on your Nuxt.js App using RudderStack. We integrated the Nuxt.js app with RudderStack JS SDK and learned how to set up the tracking code. We also set up Google Analytics as a destination in RudderStack to route all event streams in real-time and also verify successful delivery of the event streams.

Get started today

Start building smarter customer data pipelines today with RudderStack. Our solutions engineering team is here to help.