Amplify - Init Vue3

% yarn create vite my-app --template vue-ts
yarn create v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "@vitejs/create-app@2.5.2" with binaries:
      - create-app
      - cva
[########] 8/8
@vitejs/create-app is deprecated, use yarn create vite instead


Scaffolding project in /Users/xxx/xxx...

Done. Now run:

  cd my-app
  yarn
  yarn dev

✨  Done in 2.25s.

% cd my-app

% vue add vuetify
? Still proceed? Yes

📦  Installing vue-cli-plugin-vuetify...


added 71 packages, and audited 72 packages in 13s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset:
  Configure (advanced)
  Default (recommended)
❯ Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  Vuetify 3 Preview (Vuetify 3)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...


added 45 packages, and audited 117 packages in 8s

16 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

% yarn

% yarn add vue-router@4   
yarn add v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ vue-router@4.0.14
info All dependencies
├─ @vue/devtools-api@6.1.4
└─ vue-router@4.0.14
✨  Done in 1.49s.

// my-app/vite.config.ts
...

      autoImport: true,
    }),
  ],
-  define: { 'process.env': {} },
+  define: { 
+    'process.env': {},
+    "global": {},
+  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),

...

// my-app/src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

loadFonts()

createApp(App)
  .use(vuetify)
  .mount('#app')
const app = createApp(App)
app.use(router)
app.use(vuetify)
app.mount('#app')

// my-app/src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";

import HelloWorld from "../components/HelloWorld.vue"

const routes = [
  {
    path: "/",
    name: "Hello",
    component: HelloWorld,
    meta: {
	isPublic: false,
	title: 'Hello Title',
	desc: 'Hello Description'
		},
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

// editleap/src/main.ts
...

import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

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

loadFonts()

const app = createApp(App)

...

% amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project my-app
The following configuration will be applied:

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  yarn build
? Start Command: yarn start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use dev
Adding backend environment dev to AWS Amplify app: xxxxxxx
⠦ Initializing project in the cloud...

...

% amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Conflict detection (required for DataStore): Disabled
? Enable conflict detection? Yes
? Select the default resolution strategy Auto Merge
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

✅ GraphQL schema compiled successfully.

Edit your schema at /Users/mia/Repositories/editleap-amplify/editleap/amplify/backend/api/editleap/schema.graphql or place .graphql files in a directory at /Users/mia/Repositories/editleap-amplify/editleap/amplify/backend/api/editleap/schema
✔ Do you want to edit the schema now? (Y/n) · no
✅ Successfully added resource editleap locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

% yarn add aws-amplify @aws-amplify/datastore

// my-app/amplify/backend/api/editleap/schema.graphql
 # all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!

- type Todo @model {
-   id: ID!
-   description: String
- }
+ type Organization @model {
+   id: ID! @primaryKey(sortKeyFields: "updatedAt")
+   name: String!
+   owner: User @hasOne
+   members: [User] @hasMany
+   updatedAt: AWSDateTime!
+   createdAt: AWSDateTime!
+ }
+ 
+ type User @model {
+   id: ID! @primaryKey(sortKeyFields: "updatedAt")
+   sub: String!
+   provider: String!
+   name: String!
+   email: String!
+   picture: String
+   title: String
+   address: String
+   state: String
+   country: String
+   organization: Organization @belongsTo
+   streams: [Stream] @hasMany
+   updatedAt: AWSDateTime!
+   createdAt: AWSDateTime!
+ }
+ 
+ type Stream @model {
+   id: ID! @primaryKey(sortKeyFields: "updatedAt")
+   name: String!
+   status: String!
+   user: User @belongsTo
+   updatedAt: AWSDateTime!
+   createdAt: AWSDateTime!
+ }

% amplify push
⠴ Fetching updates to backend environment: dev from the cloud.

...

    Current Environment: dev
    
┌──────────┬───────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin   │
├──────────┼───────────────┼───────────┼───────────────────┤
│ Api      │ my-app        │ Create    │ awscloudformation │
└──────────┴───────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes

...

? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/API.ts
⠏ Updating resources in the cloud. This may take a few minutes...

...

// my-app/amplify/backend/api/editleap/schema.graphql

@@ -5,8 +5,6 @@ input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONL
 type Organization @model {
  id: ID! @primaryKey(sortKeyFields: "updatedAt")
  name: String!
-  owner: User @hasOne
-  members: [User] @hasMany
  updatedAt: AWSDateTime!
  createdAt: AWSDateTime!
}
@ -22,8 +20,6 @@ type User @model {
  address: String
  state: String
  country: String
-  organization: Organization @belongsTo
-  streams: [Stream] @hasMany
  updatedAt: AWSDateTime!
  createdAt: AWSDateTime!
}
@ -32,7 +28,6 @@ type Stream @model {
  id: ID! @primaryKey(sortKeyFields: "updatedAt")
  name: String!
  status: String!
-  user: User @belongsTo
  updatedAt: AWSDateTime!
  createdAt: AWSDateTime!
}

% amplify push
⠏ Fetching updates to backend environment: dev from the cloud.

...

% amplify add auth
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation)
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? Yes, I want to make some additional changes.
 What attributes are required for signing up? Email, Name, Picture (This attribute is not supported by Login With Amazon, Signinwithapple.)
 Do you want to enable any of the following capabilities? 
 What domain name prefix do you want to use? my-app00000000-00000000
 Enter your redirect signin URI: https://localhost:3000/
? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: https://localhost:3000/
? Do you want to add another redirect signout URI No
 Select the social providers you want to configure for your user pool: Google
  
 You've opted to allow users to authenticate via Google.  If you haven't already, you'll need to go to https://developers.google.com/identity and crea
te an App ID. 
 
 Enter your Google Web Client ID for your OAuth flow:  XXXXX
 Enter your Google Web Client Secret for your OAuth flow:  XXXXX
✅ Successfully added auth resource my-app00000000 locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud