Steps to initialize an Amplify Vue, Vuetify, Vuex, Vue Router, i18n project - TachyonCMS/tachyon-framework GitHub Wiki

Background on why these options were chosen.

Create a Vue project

vue create tachyon-framework

Choices:

? Please pick a preset: 
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

Change to the project directory.

cd activerules-framework

Amplify Support

amplify init

Options:

? Enter a name for the project tachyonframework
The following configuration will be applied:

Project information
| Name: tachyonframework
| 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? (Y/n) y

Use the authentication method you prefer, it makes no difference to the end product.

? Select the authentication method you want to us
e: (Use arrow keys)
❯ AWS profile 
  AWS access keys

Amplify Auth

amplify add auth
 Do you want to use the default authentication and security configu
ration? Manual configuration
 Select the authentication/authorization services that you want to 
use: User Sign-Up, Sign-In, connected with AWS IAM controls (Enable
s per-user Storage features for images or other content, Analytics,
 and more)
 Please provide a friendly name for your resource that will be used
 to label this category in the project: tachyonframework4274e191427
4e191
 Please enter a name for your identity pool. tachyonframework4274e1
91_identitypool_4274e191
 Allow unauthenticated logins? (Provides scoped down permissions th
at you can control via AWS IAM) No
 Do you want to enable 3rd party authentication providers in your i
dentity pool? No
 Please provide a name for your user pool: tachyonframework4274e191
_userpool_4274e191
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email or Phone Number


 Do you want to add User Pool Groups? Yes
? Provide a name for your user pool group: admin
? Do you want to add another User Pool Group Yes
? Provide a name for your user pool group: support
? Do you want to add another User Pool Group No
✔ Sort the user pool groups in order of preference · admin, support Do you want to add an admin queries API? Yes
? Do you want to restrict access to the admin queries API to a spec
ific Group Yes
? Select the group to restrict access with: admin
 Multifactor authentication (MFA) user login options: OPTIONAL (Ind
ividual users can use MFA)
 For user login, select the MFA types: Time-Based One-Time Password
 (TOTP)
 Please specify an SMS authentication message: Your authentication 
code is {####}
 Email based user registration/forgot password: Enabled (Requires p
er-user email entry at registration)
 Please specify an email verification subject: Your verification co
de
 Please specify an email verification message: Your verification co
de is {####}
 Do you want to override the default password policy for this User 
Pool? Yes
 Enter the minimum password length for this User Pool: 8
 Select the password character requirements for your userpool: Requ
ires Lowercase, Requires Uppercase, Requires Numbers
 Warning: you will not be able to edit these selections. 
 What attributes are required for signing up? Email
 Specify the apps refresh token expiration period (in days): 30
 Do you want to specify the user attributes this app can read and w
rite? No
 Do you want to enable any of the following capabilities? 
 Do you want to use an OAuth flow? No
? Do you want to configure Lambda Triggers for Cognito? Yes
? Which triggers do you want to enable for Cognito

Add Amplify modules

yarn add aws-amplify @aws-amplify/ui-vue

Update main.js

Add the following:

import '@aws-amplify/ui-vue';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

Update App.vue

Add the following:

<amplify-authenticator>
    <div>
      My App
      <amplify-sign-out></amplify-sign-out>
    </div>
  </amplify-authenticator>

Install Vuetify

vue add vuetify

Options:

? Choose a preset: Default (recommended)

Install i18n Localization

vue add i18n

Options:

? The locale of project localization. en-US
? The fallback locale of project localization. en-US
? The directory where store localization messages of project. It s 
stored under `src` directory. locales
? Enable locale messages in Single file components ? No

Install Vue Router

vue add router

Options:

? Use history mode for router? (Requires proper server setup for in
dex fallback in production) No

Install Vuex

vue add vuex
⚠️ **GitHub.com Fallback** ⚠️