# Sidecar Tutorial: Client-side

In this part of the introductory tutorial, we will be building the client-side app with Nuxt JS a supporting framework for Vue JS.

Inside your `QuickApp` project directory, create a directory for the client-side app:

```bash
mkdir app
cd app
```

Create a package.json file

```bash
touch package.json
```

Copy into the package.json file the necessary dependencies

```json
{
    "name": "my-app",
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "generate": "nuxt generate",
        "start": "nuxt start"
    },
    "dependencies": {
        "@nuxtjs/axios": "^5.13.6",
        "nuxt": "^2.15.8"
    }
}
```

{% hint style="info" %}
`scripts` define Nuxt commands that will be launched with the command `npm run <command>`
{% endhint %}

Add Nuxt to the project by executing the following command in terminal, which will install and add the necessary node modules to the project.

```bash
npm install nuxt
```

Add a Nuxt configuration file to the app project directory so that we can define global variables such as API URL and any additional plugins we'd like to add.

```
touch nuxt.config.js
```

Copy into `nuxt.config.js` the following configurations. The client-side will call the API on `port 5000` once we containerise the application.

{% code title="nuxt.config.js" %}

```json5
export default {
    publicRuntimeConfig: {
        baseURL: process.env.BASE_URL || 'http://0.0.0.0:5000/'
      },
    server: {
        port: process.env.NUXT_PORT,
        host: process.env.NUXT_HOST
    },
    buildModules: [
    ],
    modules: [
    "@nuxtjs/axios"
    ],
    components: true,
    
}
```

{% endcode %}

In order to fetch data from the server-side API, the app will use Axios. Install Axios onto the app project setup, by running the following command in terminal.

```bash
npm install @nuxtjs/axios
```

Now, we can create a pages directory which will automatically create routes for each .vue file inside the directory.

```bash
mkdir pages
```

Create an `index.vue` file which will be the primary page on the app.

```bash
touch pages/index.vue
```

Populate the `index.vue` file:

```javascript
<template>
    <div>
        <h1> {{ messages.message }} </h1>
    </div>
</template>

<script>
export default {
    async fetch() {
        this.messages = await this.$axios.$get(this.$config.baseURL);
    },
    data(){
        return {
            messages: [],
        };
    },
};
</script>

<style lang="scss" scoped>

</style>

```

The `index.vue` file in the pages directory will call our message in the server-side API and display it as a title.

![](/files/TGEvihVfxj8spa9HySqE)

{% hint style="warning" %}
If you are testing the application prior to containerising with docker, you may need to change the IP of the server-side app in `nuxt.config.js` temporarily to fit its default (port `8000` instead of port`5000`).
{% endhint %}

This concludes the required setup for the client-side app. The following step will containerise the application with the IndustryApps pre-defined Sidecar.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.industryapps.net/fundamentals/deploy-an-app-via-pre-defined-sidecar/sidecar-tutorial-client-side.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.