How To Event Stream Data From Your Nuxt.Js App Using RudderStack

RudderStackis an open-sourceCustomer Data Pipelinethat 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 yourNuxt.jsapp with RudderStack using ourJavaScript 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:

1. Integrate Nuxt.js app with RudderStack JavaScript SDK and set up the tracking code
2. Set up a tool or warehouse destination in RudderStack to route all the event data in real-time
3. 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 theofficial Nuxt.js documentationto 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:

1. Log into yourRudderStack dashboard. (If you're new to RudderStack,sign up here)

2. On successful login, you should see the following dashboard:

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

4. Next, create a Source by simply clicking on theAdd Sourcebutton. You can also click on theDirectoryoption in the left nav bar and selectEvent StreamsunderSources, as shown. Then, selectJavaScript.

5. Assign a name to your Source and click onNext.

6. 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 thenuxt.config.jsfile in your app's folder to include the following script:

gist:Veenap/3626e9bac218dde5a66fc2583eb31bd1

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

Step 2: Creating A Destination Tool In RudderStack For Routing Your Nuxt.Js App Events

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

1. In the left navigation bar of your Rudderstack dashboard, click onDestinationsand selectAdd Destination. Since we have already configured a source, you can simply click on the source and click on theAdd Destinationoption, 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.

2. Next, chooseGoogle Analyticsas your Destination.

3. Add a name to your destination and click onNext, as shown:

4. Now, connect theJavaScriptsource that we have already configured for this tutorial.

5. In theConnection Settings, configure your Google Analytics destination with your Google AnalyticsTracking IDand other optional settings, as shown below. Then, click onNext.

6. You can also transform your events before sending them to Google Analytics. For more information on this feature, check out ourdocumentationonUser Transformations.

7. Voila! Google Analytics is now configured as a destination. You should now see the following source-destination connection in your dashboard:

(Alternate) Step 2: Create A Warehouse Destination In RudderStack For Your Nuxt.Js App Events

mportant: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 ourdocsto get detailed and step-by-step instructions on how to do it for your preferred data warehouse.

We will set up aGoogle BigQuery warehouse destinationfor 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 followingour documentation.

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

1. From the Destinations Directory, selectGoogle BigQuery:

2. Add a name to your Destination and click onNext.

3. Connect toJavaScript sourcefrom which we will track our Nuxt.js app events. Then, click on Next.

4. Specify theConnection Credentials. Enter theBigQuery Project IDand theStaging Bucket Name. You can refer to theseinstructionsto get this information.

5. Lastly, copy the contents of the privateJSON file. Find more information on how to do this in ourdocumentation.

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

We have successfully configured our event source and destination. Let's verify if our event stream works correctly. To do so, let's deploy our Nuxt.js application and test if the events are tracked by theJavaScriptsourceand delivered to ourGoogle Analyticsdestination.

Follow these steps to find:

1. On your Terminal or cmd, navigate to the folder containing your Nuxt.js app.

2. To deploy the app, runnpm run devcommand, as shown:

3. Open your Nuxt.js app by visiting the URLhttp://localhost:3000on your browser.

4. To verify ifrudder-analytics.js(RudderStack's JavaScript SDK) has loaded correctly, go to your browser'sDeveloper toolsand navigate to theNetworktab. The following screenshot highlights this option for Google Chrome:

5. Check if RudderStack can track the different pageviews and clicks by clicking on theLive Eventstab of your JavaScript source on the RudderStack dashboard page:

Note: After deploying your app, there can sometimes be a lag before events start sending and are visible in your dashboard and destination. Don't worry. All events are captured and sent; just be aware that they can take a few minutes to show up.

6. Brilliant! RudderStack has successfully tracked and captured the events:

7. Next, let's check if the events are sent to our Google Analytics destination. Go to your Google Analytics dashboard and navigate to theRealtime-Eventsoption.

We can see one active user on our Nuxt.js app, and the track event is visible too. This shows that the event has been tracked and delivered successfully. Similarly, you should also receive the event in your Google BigQuery warehouse.

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.

Sign Up For Free And Start Sending Data

Test out our event stream, ELT, and reverse-ETL pipelines. Use our HTTP source to send data in less than 5 minutes, or install one of our 12 SDKs in your website or app. Get Started