Vue Configurator

A Vue 3 component library featuring Configurator and User components.

Installation

npm install vue-configurator

Usage

As a Plugin (Global Registration)

import { createApp } from 'vue'
import VueConfigurator from 'vue-configurator'
import 'vue-configurator/dist/style.css'

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

Then use the components in your templates:

<template>
  <Configurator 
    title="My Card Title"
    description="This is a description of the card"
    action="Click Me"
    @action-click="handleClick"
  />
  
  <User 
    image="https://example.com/avatar.jpg"
    name="John Doe"
  />
</template>

<script setup>
const handleClick = () => {
  console.log('Action button clicked!')
}
</script>

Individual Component Import

<template>
  <Configurator 
    title="My Card Title"
    description="This is a description of the card"
    action="Click Me"
    @action-click="handleClick"
  />
  
  <User 
    image="https://example.com/avatar.jpg"
    name="John Doe"
  />
</template>

<script setup>
import { Configurator, User } from 'vue-configurator'
import 'vue-configurator/dist/style.css'

const handleClick = () => {
  console.log('Action button clicked!')
}
</script>

Components

Configurator

A card component that displays a title, description, and an action button.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | title | String | Yes | - | The title displayed in the card | | description | String | No | '' | The description text displayed in the card | | action | String | No | 'Action' | The text displayed on the action button |

Events

| Event | Description | |-------|-------------| | action-click | Emitted when the action button is clicked |

Example

<Configurator 
  title="Welcome"
  description="This is a sample card with an action button"
  action="Get Started"
  @action-click="handleClick"
/>

User

A component that displays a user's avatar image and name.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | image | String | Yes | - | The URL or path to the user's avatar image | | name | String | Yes | - | The user's name to display |

Features

• Automatically displays a placeholder with the first letter of the name if the image fails to load
• Shows a default placeholder if no image is provided
• Responsive circular avatar with hover effects

Example

<User 
  image="https://example.com/user-avatar.jpg"
  name="Jane Smith"
/>

CustomGpt

A chat interface component that integrates with OpenAI's GPT API for text generation.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | secretKey | String | Yes | - | Your OpenAI API secret key | | model | String | No | 'gpt-3.5-turbo' | The OpenAI model to use (e.g., 'gpt-3.5-turbo', 'gpt-4') | | maxTokens | Number | No | 300 | Maximum tokens for the response (total input/output limited to ~500 tokens) | | placeholder | String | No | 'Enter your message...' | Placeholder text for the input field |

Features

• Real-time chat interface with OpenAI GPT
• Loading states and error handling
• Conversation history management
• Token limit handling (max 500 tokens total)
• Enter key to send messages
• Clear conversation button
• Responsive design

Example

<CustomGpt 
  secret-key="sk-..." 
  :max-tokens="300"
  model="gpt-3.5-turbo"
/>

Note: Make sure to keep your OpenAI API key secure. Never commit it to version control. Consider using environment variables or a secure storage solution.

Usage in React

This library can also be used in React applications using web components:

Option 1: Using React Wrapper Components (Recommended)

npm install vue-configurator react react-dom

import React from 'react'
import { Configurator, User, CustomGpt } from 'vue-configurator/react'
import 'vue-configurator/dist/style.css'

function App() {
  return (
    <div>
      <Configurator
        title="React + Vue Components"
        description="This Vue component works in React!"
        action="Click Me"
        onActionClick={() => alert('Clicked!')}
      />
      
      <User
        image="https://example.com/avatar.jpg"
        name="John Doe"
      />
      
      <CustomGpt
        secretKey="your-openai-api-key"
        model="gpt-3.5-turbo"
        maxTokens={300}
      />
    </div>
  )
}

Option 2: Using Web Components Directly

import { useEffect } from 'react'
import 'vue-configurator/web-components'
import 'vue-configurator/dist/style.css'

function App() {
  useEffect(() => {
    // Web components auto-register when imported
  }, [])

  return (
    <div>
      <vue-configurator-card
        title="React + Vue Components"
        description="This Vue component works in React!"
        action="Click Me"
        onActionClick={() => alert('Clicked!')}
      />
      
      <vue-configurator-user
        image="https://example.com/avatar.jpg"
        name="John Doe"
      />
      
      <vue-configurator-gpt
        secret-key="your-openai-api-key"
        model="gpt-3.5-turbo"
        max-tokens="300"
      />
    </div>
  )
}

Usage in Vanilla JavaScript / HTML

You can use the web components directly in vanilla JavaScript:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./node_modules/vue-configurator/dist/style.css">
</head>
<body>
  <vue-configurator-card
    title="Welcome"
    description="This is a Vue component in vanilla HTML!"
    action="Click Me"
  ></vue-configurator-card>

  <vue-configurator-user
    image="https://example.com/avatar.jpg"
    name="John Doe"
  ></vue-configurator-user>

  <vue-configurator-gpt
    secret-key="your-openai-api-key"
    model="gpt-3.5-turbo"
    max-tokens="300"
  ></vue-configurator-gpt>

  <script type="module">
    import { registerWebComponents } from './node_modules/vue-configurator/dist/vue-configurator-web-components.js'
    
    registerWebComponents()

    // Listen to events
    document.querySelector('vue-configurator-card')
      .addEventListener('action-click', () => {
        console.log('Button clicked!')
      })
  </script>
</body>
</html>

Or using UMD build:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./node_modules/vue-configurator/dist/style.css">
  <script src="./node_modules/vue-configurator/dist/vue-configurator-web-components.umd.cjs"></script>
</head>
<body>
  <vue-configurator-card
    title="Welcome"
    description="This is a Vue component in vanilla HTML!"
    action="Click Me"
  ></vue-configurator-card>

  <script>
    // Web components are auto-registered when UMD script loads
    VueConfiguratorWC.register()
  </script>
</body>
</html>

Development

# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Publishing to NPM

Follow these steps to publish this library to npm:

1. Create an npm Account

If you don't have an npm account, create one at npmjs.com

2. Login to npm

npm login

Enter your username, password, and email address.

3. Update Package Information

Before publishing, make sure to:

• Update the name field in package.json to a unique name (npm package names must be unique). You can check availability at npmjs.com
• Update the version field (following semantic versioning: major.minor.patch)
• Add your name/email in the author field
• Update the description and keywords fields

4. Check Package Name Availability

npm view vue-configurator

If it returns a 404, the name is available.

5. Build the Library

npm run build

This creates the dist folder with the compiled library files.

6. Test the Build Locally (Optional)

You can test your package locally before publishing:

npm pack

This creates a .tgz file. You can install it in another project:

npm install /path/to/vue-configurator-1.0.0.tgz

7. Publish to npm

For the first publish:

npm publish --access public

Note: If the package name doesn't have a scope (e.g., @username/package-name), you might need to use --access public flag.

For subsequent publishes, just increment the version and run:

npm publish

8. Version Management

Use semantic versioning:

• Patch version (1.0.0 → 1.0.1): Bug fixes

  npm version patch

• Minor version (1.0.0 → 1.1.0): New features (backward compatible)

  npm version minor

• Major version (1.0.0 → 2.0.0): Breaking changes

  npm version major

Then publish:

npm publish

9. Verify Publication

Check that your package is published:

npm view vue-configurator

Or visit: https://www.npmjs.com/package/vue-configurator

Important Notes

• The prepublishOnly script in package.json automatically builds the library before publishing
• Make sure you've built the library before publishing (or let prepublishOnly handle it)
• The files field in package.json specifies which files to include in the npm package (only the dist folder in this case)
• Vue is set as a peerDependency, meaning users of this library must have Vue installed in their project

License

MIT