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

![](https://3706867246-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0tGo33otNRgIhFn6lpgU%2Fuploads%2FJgta439lwIvPrZGOM27H%2FScreenshot%202022-08-04%20at%2022.21.01.png?alt=media\&token=be2124e1-28a8-4e9f-9922-b98ea2c1f3cf)

{% 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.