@solfacil/plasma-utils/README.md

- 💚 [Nuxt 3](https://nuxt.com/) - Compatible with Nuxt 3 - 🍞 [BUN](https://bun.sh/) - A fast JavaScript all-in-one toolkit (runtime, bundler, test runner, package manager). - 🔑 [Keycloak](https://www.keycloak.org/) integration. - ⚡️ Vite - Instant HMR.

![Plasma logo](./public/plasma-gh-light.svg#gh-light-mode-only)
![Plasma logo](./public/plasma-gh-dark.svg#gh-dark-mode-only)


<p align="center">
	<a href="https://vuejs.org/guide/introduction.html">
		<img src="https://badgen.net/badge/✔/Vue 3/green" alt="Vue doc">
	</a>
	<a href="https://nuxt.com/">
		<img src="https://badgen.net/badge/✔/Nuxt 3/green" alt="Nuxt doc">
	</a>
	<a href="https://www.typescriptlang.org/">
		<img src="https://badgen.net/badge/✔/Typescript/blue" alt="Typescript doc">
	</a>
</p>
<p align='center'>
Utility library of <b><a href="https://github.com/solfacil/plasma-nuxt">Plasma Template</a></b><br>
</p>

## Features

- 💚 [Nuxt 3](https://nuxt.com/) - Compatible with Nuxt 3
- 🍞 [BUN](https://bun.sh/) - A fast JavaScript all-in-one toolkit (runtime, bundler, test runner, package manager).
- 🔑 [Keycloak](https://www.keycloak.org/) integration.
- ⚡️ Vite - Instant HMR.
- 📦 Multiples connections for Graphql and Rest APIs.
- 🪜 Change environments on runtime.
- 🛠 Utilities loading, env, storage, etc.
- 🦾 TypeScript, of course.

## IDE

We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable [Vetur](https://vuejs.github.io/vetur/) if you have it).

## Try it now!

> Plasma requires Node >= 16.17.0

## Quick start

```bash
# Clone the repository
git clone https://github.com/solfacil/plasma-utils

# Install dependencies
bun i

# Start development playground
bun dev

# Build for production
bun build:lib:ts

# Publish to npm
npm publish
```

## How to use
### Vue 3
```typescript
import plasma from '@solfacil/plasma-utils';
import App from './App.vue'

const plasmaOptions = {
  configuration: {
	enableKeycloak: false,
	hostProduction: 'https://my-host.com',
	hostStaging: 'https://my-host.com'
  },
  connections: {
	graphql: {
	  default: {
		dev: {
		  url: 'https://rickandmortyapi.com/graphql'
		},
		prod: {
		  url: 'https://rickandmortyapi.com/graphql'
		},
		stg: {
		  url: 'https://rickandmortyapi.com/graphql'
		}
	  }
	},
	rest: {
	  rickmorty: {
		dev: {
		  url: 'https://rickandmortyapi.com/api'
		},
		prod: {
		  url: 'https://rickandmortyapi.com/api'
		},
		stg: {
		  url: 'https://rickandmortyapi.com/api'
		}
	  }
	},
	keycloak: {
	  dev: {
		url: 'https://my-keycloak.com',
		realm: 'General',
		client_id: 'ecommerce'
	  },
	  prod: {
		url: 'https://my-keycloak.com',
		realm: 'General',
		client_id: 'ecommerce'
	  },
	  stg: {
		url: 'https://my-keycloak.com',
		realm: 'General',
		client_id: 'ecommerce'
	  }
	}
  }
};

createApp(App)
  .use(plasma, plasmaOptions)
  .mount('#app');
```

### Nuxt 3
```typescript
import plasma from '@solfacil/plasma-utils';

export default defineNuxtPlugin(({ vueApp }) => {
  const config = useRuntimeConfig().public;

  vueApp.use(plasma, {
    configuration: {
      enableKeycloak: false,
      hostProduction: config.HOST_PRODUCTION,
      hostStaging: config.HOST_STAGING
    },
    connections: {
      graphql: {
        default: {
          dev: {
            url: 'https://rickandmortyapi.com/graphql'
          },
          prod: {
            url: 'https://rickandmortyapi.com/graphql'
          },
          stg: {
            url: 'https://rickandmortyapi.com/graphql'
          }
        }
      },
      rest: {
        rickmorty: {
          dev: {
            url: 'https://rickandmortyapi.com/api'
          },
          prod: {
            url: 'https://rickandmortyapi.com/api'
          },
          stg: {
            url: 'https://rickandmortyapi.com/api'
          }
        }
      },
      keycloak: {
        dev: {
          url: 'https://my-keycloak.com',
          realm: 'General',
          client_id: 'ecommerce'
        },
        prod: {
          url: 'https://my-keycloak.com',
          realm: 'General',
          client_id: 'ecommerce'
        },
        stg: {
          url: 'https://my-keycloak.com',
          realm: 'General',
          client_id: 'ecommerce'
        }
      }
    }
  });
});
```