Quick Start

Create a new project

If you want a fresh start you can use Orion CLI to scafflod a new clean project.
Go to the Creating a new project section of the installation page.

Installation in an existing project

If you're not familiar with npm you can refer to the installation page.
If you want to install Orion in an existing project, follow below steps.

npm install --save @orion.ui/orion

import { createApp } from 'vue';
import App from './App.vue';

import Orion from '@orion.ui/orion'; // Import library
import '@orion.ui/orion/dist/style.css'; // Import styles
import '@orion.ui/orion/dist/monkey-patching'; // Import Monkey Patching definition file

createApp(App)
  .use(Orion)
  .mount('#app');

import { createApp } from 'vue';
import App from './App.vue';

import Orion from '@orion.ui/orion'; // Import library
import '@orion.ui/orion/dist/style.css'; // Import styles

createApp(App)
  .use(Orion, {
		prefix: 'abc',
    use: ['components'], // Monkey patching won't be used here
    lang: 'fr',
  } as Orion.Config)
  .mount('#app')

Configuration options

Orion provides some configuration options when using it in your application.
These options are of type Orion.Config, described below.

// Type definition
type Orion.Config = {
	prefix?: string
	use?: ("components" | "monkeyPatching")[]
	lang?: LangAvailable
	router?: Router
}

prefixstring : 'o'

This is the prefix that will prepend the components name in the template.
For example if you set it with 'abc', in your template <o-button> will be <abc-button>.

use('components' | 'monkeyPatching')[] : ['components', 'monkeyPatching']

Basically you can use only the components, or only the Monkey Patching (more infos), or both, which is the default usage.

lang'en' | 'fr' : 'en'

At the moment english and french translation are available.

routerRouter : undefined

Your application's VueRouter instance, if you use OrionLayout or navigation components (OrionNavMain, OrionNavTop, OrionNavTab)