Set up fullstack project

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

1npm init vue@3
2
3Need to install the following packages:
4  create-vue@3
5Ok to proceed? (y) y
6
7✔ Project name: … vue-amplified
8✔ Add TypeScript? … No
9✔ Add JSX Support? … No
10✔ Add Vue Router for Single Page Application development? … No
11✔ Add Pinia for state management? … No
12✔ Add Vitest for Unit Testing? … No
13✔ Add Cypress for both Unit and End-to-End testing? … No
14✔ Add ESLint for code quality? … No

This creates a new Vue app in a directory called vue-amplified. You can then run the following commands to switch into the new vue-amplified directory, install the project dependencies, and run the app:

1cd vue-amplified
2npm install
3npm run dev

Initialize a new backend

Now that you have a running 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:

1amplify 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

1? Enter a name for the project (myamplifyproject) todo

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

1The following configuration will be applied:
2
3Project information
4| Name: todo
5| Environment: dev
6| Default editor: Visual Studio Code
7| App type: javascript
8| Javascript framework: vue
9| Source Directory Path: src
10| Distribution Directory Path: dist
11| Build Command: npm run-script build
12| Start Command: npm run-script serve
13
14? 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:

1? Select the authentication method you want to use: (Use arrow keys)
2> AWS profile
3  AWS access keys

Select AWS profile and then choose the profile you configured in the Prerequisites.

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 cloud capabilities, such as GraphQL API and web hosting. As you add these 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 amplifyconfiguration.json in your designated Source Directory Path that holds all the configuration for the services you create with Amplify. This is how the Amplify JavaScript client library is able to get the necessary information to connect to your backend services.
• It modifies the .gitignore file, adding some generated files to the ignore list

Install Amplify Libraries

The aws-amplify package is the main library for working with Amplify Libraries in your projects:

1npm install aws-amplify

Set up frontend

Next, configure the Amplify libraries client-side so it can interact with backend services.

Open src/main.js and add the following code below the last import:

1import { Amplify } from 'aws-amplify';
2import amplifyconfig from './amplifyconfiguration.json';
3Amplify.configure(amplifyconfig);

And that's all it takes to configure Amplify. As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in amplifyconfiguration.json will update automatically.

Now that your app is set up and Amplify is initialized, you can add an API in the next step.