@solfacil/plasma-utils

Utility library of Plasma Template

Features

• 💚 Nuxt 3 - Compatible with Nuxt 3
• 🍞 BUN - A fast JavaScript all-in-one toolkit (runtime, bundler, test runner, package manager).
• 🔑 Keycloak 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 with Volar to get the best experience (You might want to disable Vetur if you have it).

Try it now!

Plasma requires Node >= 16.17.0

Quick start

# 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

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

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'
        }
      }
    }
  });
});