Installation

Azure Artifacts Setup

Since @ftx/ui is published as a private package to Azure Artifacts, you need to configure npm authentication before installation.

Step 1: Generate Personal Access Token (PAT)

1. Go to Azure DevOps
2. Click on your profile icon → Personal access tokens
3. Click + New Token
4. Configure the token:
   • Name: npm-packages (or any descriptive name)
   • Organization: ftxinfotech
   • Expiration: Set appropriate expiration date
   • Scopes: Select Packaging → Read (minimum required)
5. Click Create and copy the token (you won't see it again!)

Step 2: Configure .npmrc File

Create or update the .npmrc file in your project root directory:

For npm:

# .npmrc
@ftx:registry=https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/
always-auth=true

Then authenticate using one of these methods:

Option A: Using npm login (Recommended)

npm login --scope=@ftx --registry=https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/

When prompted:

• Username: Your Azure DevOps username (e.g., your-email@domain.com)
• Password: Your Personal Access Token (PAT)
• Email: Your email address

Option B: Using base64 encoded PAT

Add to your .npmrc file:

# .npmrc
@ftx:registry=https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/
always-auth=true
//pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/:username=ftxinfotech
//pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/:_password=[BASE64_ENCODED_PAT]
//pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/:email=npm requires email to be set but doesn't use the value

To encode your PAT to base64:

# On Windows PowerShell
[Convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("YOUR_PAT_HERE"))

# On Linux/Mac
echo -n "YOUR_PAT_HERE" | base64

For pnpm:

Create .npmrc file:

# .npmrc
@ftx:registry=https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/
always-auth=true

Then authenticate:

pnpm config set @ftx:registry https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/
pnpm config set //pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/:always-auth true
pnpm login --registry=https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/ --scope=@ftx

For yarn:

Create .npmrc file:

# .npmrc
@ftx:registry=https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/
always-auth=true

Then authenticate:

yarn config set @ftx:registry https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/
yarn config set //pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/:always-auth true

Step 3: Verify Configuration

Test your configuration:

npm view @ftx/ui versions --registry=https://pkgs.dev.azure.com/ftxinfotech/FTX%20Core%20Services/_packaging/ftx-packages/npm/registry/

If configured correctly, you should see a list of available versions.

Troubleshooting

• 401 Unauthorized: Check that your PAT is valid and has the correct scopes
• 404 Not Found: Verify the registry URL is correct
• Token expired: Generate a new PAT and update your .npmrc file

For more information, visit Azure Artifacts Documentation.

Package Installation

Once Azure Artifacts is configured, install @ftx/ui using your preferred package manager:

npm install @ftx/ui
# or
pnpm add @ftx/ui
# or
yarn add @ftx/ui

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

• vue ^3.3.0
• quasar ^2.15.0
• pinia ^2.1.7

Installing Peer Dependencies

npm install vue@^3.3.0 quasar@^2.15.0 pinia@^2.1.7
# or
pnpm add vue@^3.3.0 quasar@^2.15.0 pinia@^2.1.7
# or
yarn add vue@^3.3.0 quasar@^2.15.0 pinia@^2.1.7

Quasar Setup

Since this package is built on Quasar Framework, you'll need to set up Quasar in your project. Follow the Quasar Installation Guide for your build tool.

Vite Example

// main.js
import { createApp } from 'vue'
import { Quasar } from 'quasar'
import quasarUserOptions from './quasar-user-options.js'
import App from './App.vue'

const app = createApp(App)
app.use(Quasar, quasarUserOptions)
app.mount('#app')

Quasar User Options

// quasar-user-options.js
import 'quasar/dist/quasar.css'
import '@quasar/extras/material-icons/material-icons.css'

export default {
  config: {},
  plugins: {}
}

Pinia Setup

If you're using Pinia for state management (required for some components like FtxGrid):

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

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

Verify Installation

You can verify the installation by importing a component:

import { FTxButton } from '@ftx/ui'
console.log(FTxButton) // Should log the component definition