Use the Vue Vite powered `create-app` to bootstrap a new Vue 3 app (selecting the defaults will work for this project):

<Block name="NPM">

```bash
npm init vue@3

Need to install the following packages:
  create-vue@3
Ok to proceed? (y) y

✔ Project name: … myamplifyproject
✔ Add TypeScript? … No 
✔ Add JSX Support? … No 
✔ Add Vue Router for Single Page Application development? … No 
✔ Add Pinia for state management? … No 
✔ Add Vitest for Unit Testing? … No 
✔ Add Cypress for both Unit and End-to-End testing? … No 
✔ Add ESLint for code quality? … No 

cd myamplifyproject

```

Install required modules:

```bash
npm install
```

Run your app:

```bash
npm run dev
```
Press `Ctrl + C` to stop the server

</Block>


## Initialize a new backend

Now that you have a running Vue app, it's time to set up Amplify so that you can create the necessary backend services needed to support the app. 

Open a new terminal. From the root of the project, run:

```bash
amplify init
```

When you initialize Amplify you'll be prompted for some information about the app:

Your backend needs a project name to use when creating resources.
Give your backend project the name `todo`
```console
? Enter a name for the project (myamplifyproject) todo
```

You'll then be asked to accept some recommended values:

```
The following configuration will be applied:

Project information
| Name: todo
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: vue
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script serve

? Initialize the project with the above configuration? Yes

```

> Where possible the CLI will infer the proper configuration based on the type of project Amplify is being initialized in. In this case it knew you are using Vue and provided the proper configuration for type of app, framework, source, distribution, build, and start options.

Next, you will need to select the authentication method you want to use to work on your project locally:

```
? Select the authentication method you want to use: (Use arrow keys)
> AWS profile
  AWS access keys
```
Select AWS profile and then choose the profile you configured in the [Prerequisites](/start/getting-started/installation/q/integration/vue/#configure-the-amplify-cli).

When you initialize a new Amplify project, a few things happen:

- It creates a top level directory called `amplify` that stores your backend definition. During the tutorial you'll add capabilities such as authentication, GraphQL API, storage, and set up authorization rules for the API. As you add features, the `amplify` folder will grow with infrastructure-as-code templates that define your backend stack. Infrastructure-as-code is a best practice way to create a replicable backend stack.
- It creates a file called `aws-exports.js` in the `src` directory that holds all the configuration for the services you create with Amplify. This is how the Amplify client is able to get the necessary information about your backend services.
- It modifies the `.gitignore` file, adding some generated files to the ignore list
- A cloud project is created for you in the AWS Amplify Console that can be accessed by running `amplify console`. The Console provides a list of backend environments, deep links to provisioned resources per Amplify category, status of recent deployments, and instructions on how to promote, clone, pull, and delete backend resources

## Install Amplify libraries

The first step to using Amplify in the client is to install the necessary dependencies:

<Block name="NPM">

```
npm install aws-amplify @aws-amplify/ui-vue
```

</Block>

<Callout>

If you are using Vue 2, please check out our legacy [documentation](https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue). For Vite installs check out this [documentation](https://ui.docs.amplify.aws/vue/getting-started/installation#vite). 

</Callout>

The `@aws-amplify/ui-vue` package is a set of components that make it easy to integrate functionality like end-to-end authentication flows. 

# Set up frontend

Next, you need to configure Amplify on the client so that you can use it to interact with your backend services.

Open __src/main.js__ and add the following code below the last import:

```javascript
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
```

## Vue Vite Config

When working with a Vue `create-app` that uses [Vite](https://vitejs.dev) you must make a few additional modifications. Please follow the steps below.

**1.** Add the following script tag to the `index.html` file at the bottom of the `<body>` tag.

```html
...
  <script>
        window.global = window;
        var exports = {};
  </script>
</body>
```

**2.** If you choose to add TypeScript, update the `tsconfig.json` file and add `skipLibCheck: true` under `compilerOptions`.

```js
...
  "compilerOptions": {
    "skipLibCheck": true,
...
```

And that's all it takes to configure Amplify with Vue and `create-app`. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in __aws-exports.js__ will update automatically.

Now that your Vue app is set up and Amplify is initialized, you're ready to add an API in the next step.