Vue Integration

Last updated: 4 months ago

This framework can be integrated via the `use()` method before `mount`, and can be used within the `mounted` lifecycle hook.

Vue Integration4 months ago React Integration4 months ago

Introduction

This framework can be integrated via the use() method before mount, as shown below:

    
    //Prerequisite: Vue and orca files have been imported
    //Install orca framework using use method
    const app = createApp(Vue);
    app.use(orca);
    //Other Vue logic

Basic Usage

After Vue.createApp, you can use use(orca) to import the entire framework.

Output
HTML
JS

```
                
                
            
```

                
                let v = Vue.createApp({
                    data() {
                        return {
                            message: "Hello Vue 3!",
                        };
                    },
                    mounted() {
                         demo01.onclick=()=>{
                                console.log(this.$orca);
                                confirm(`OrcaUI has been imported`);
                            }
                        }
                    });
                    //Import orca
                    v.use(orca);
                    v.mount("#app01");

Configuration Override

The orca.config property is used to configure framework parameters, including global parameters and default parameters for various templates. After importing Vue, you can override the original orca.config parameters using the 2nd parameter of the use method.

Since most OrcaUI modules require a DOM host (virtual DOM is also acceptable), OrcaUI related code is typically used in the mounted method, while creating template text or asynchronous usage is unrestricted.

Output
HTML
JS

```
                
                
            
```

                
                let v = Vue.createApp({
                    data() {
                        return {
                            message: "Hello Vue 3!",
                        };
                    },
                    mounted() {
                            demo02.onclick=()=>{
                                console.log(this.$orca);
                                    new this.$orca.Message({
                                        content:'OrcaUI has been imported, default Message theme color changed',
                                    }).show();
                                    //Normal usage without use: new orca.Message({...}).show();
                            }
                        }
                    });
                    //Import orca and change default Message theme color
                    v.use(orca,{message:{status:'error'}});
                    v.mount("#app02");

Automatic Initialization

This framework contains many WebComponents - even modules that were originally Module-based have been encapsulated as WebComponents. WebComponents can initialize automatically and can be used like regular HTML nodes, which Vue fully supports.

Output
HTML
JS

```
                
                
            
```

                
                let v = Vue.createApp({
                    setup() {
                         const testAlert = () => {
                                alert('Clicked OrcaUI button');
                            };
                            const elem = Vue.ref(null);
                            //Executed after template parsing and node mounting
                            Vue.onMounted(() => {
                                //elem.value equals oc-btn node
                                elem.value.onmouseover = function(){
                                    this.setAttribute('theme','error')
                                }
                                elem.value.onmouseout = function(){
                                    this.setAttribute('theme','prim')
                                }
                            });
                            //Expose variables
                            return {elem,testAlert};
                    },
                     template: `
                        <div>
                            <h1>Hello, Vue 3!</h1>
                            <p><oc-btn theme='prim' label='OrcaUI Button' icon='_icon-global' @click="testAlert" ref="elem"></oc-btn></p>
                        </div>
                    `,
                    });
                    v.mount("#app03");