Amplify UI

Installation

Dependencies

Packages

For Vue 3 install @aws-amplify/ui-vue with npm or yarn:

npm install @aws-amplify/ui-vue aws-amplify
yarn add @aws-amplify/ui-vue aws-amplify
Vue 2

If you're looking for the Vue 2 documentation please click here.

Register as a global plugin (Optional)

Optionally, you can register all the @aws-amplify/ui-vue components at once.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import AmplifyVue from '@aws-amplify/ui-vue';

const app = createApp(App);
app.use(AmplifyVue);
app.mount('#app');

Otherwise, you can import individual components from the @aws-amplify/ui-vue package in each one of your components.

Styles

Amplify UI ships with a default theme that you can customize to match the look and feel of your project.

import '@aws-amplify/ui-vue/styles.css';

Fonts

By default, Amplify UI does not bundle a font so that you can choose which font to use in your application and how you want to load the font. The default theme references the Inter font because it works well for UI design and is offered as a variable font. The easiest way to add the Inter font to your application is to use the Google Fonts CDN:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap"
  rel="stylesheet"
/>

or

@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');

You can also install it as an NPM dependency:

npm install @fontsource/inter
yarn add @fontsource/inter

Then import the variable font in your application:

import '@fontsource/inter/variable.css';

Check out Fontsource for more information and documentation on this library.

If you want to enable OpenType features like alternative styles, you can use the font directly from the creator's website: https://rsms.me/inter/

@import url('https://rsms.me/inter/inter.css');

html {
  /* this enables some alternative styles and contextual characters to the font */
  font-feature-settings: 'ss01', 'ss02', 'case', 'salt';
}

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.