Uni Ku Root

https://uni-ku.js.org/projects/root/
Admin
Uni Ku Root is a Vite-based tool for Uniapp that creates virtual root components to enable shared...
Tokens:27,554
Snippets:172
Trust Score:8.1
Update:9 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://uni-ku.js.org/projects/root/installation

Commands to launch the development server for Uniapp projects using different package managers. This is used to verify the installation and configuration of UniKu Root.

```shell
# 使用 npm
npm run dev

# 使用 yarn
yarn dev

# 使用 pnpm
pnpm dev

```

--------------------------------

### Trigger Toast from a Page

Source: https://uni-ku.js.org/projects/root/getting-started

This code example demonstrates how to trigger the global toast from a regular Uniapp page. It imports the 'useToast' composable and uses the 'showToast' function in a button's click event to make the toast visible.

```vue
<!-- src/pages/*.vue -->
<script setup lang="ts">
import { useToast } from '@/composables/useToast'

const { showToast } = useToast()
</script>

<template>
  <view>
    Hello UniKuRoot
  </view>
  <button @click="showToast">
    视图内触发展示Toast
  </button>
</template>
```

--------------------------------

### Custom Root Component Example in Vue

Source: https://uni-ku.js.org/projects/root/features

An example of a custom root component file (e.g., KuRoot.vue) that replaces the default App.ku.vue. It demonstrates basic Vue setup with refs and includes the KuRootView component to specify the view location.

```vue
<!-- KuRoot.vue (replaces default App.ku.vue) -->
<script setup lang="ts">
import { ref } from 'vue'
const customRootMessage = ref('Hello from Custom Root!')
</script>

<template>
  <div class="custom-root">
    <h1>{{ customRootMessage }}</h1>
    <!-- View tag -->
    <KuRootView />
  </div>
</template>

<style scoped>
.custom-root {
  padding: 20px;
  background-color: #f5f5f5;
}
</style>
```

--------------------------------

### Create Virtual Root Component (App.ku.vue)

Source: https://uni-ku.js.org/projects/root/getting-started

This code defines a virtual root component named 'App.ku.vue'. It includes a basic Vue setup with a reactive message and the crucial '<KuRootView />' component, which acts as a placeholder for routed content. This component can be placed at any level within the template, but only one instance is allowed.

```vue
<!-- src/App.ku.vue | App.ku.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const helloKuRoot = ref('Hello AppKuVue')
</script>

<template>
  <div>{{ helloKuRoot }}</div>
  
  <!-- 顶级 KuRootView -->
  <KuRootView />
  
  <!-- 或内部 KuRootView，无论放置哪一个层级都被允许，但仅可有一个！ -->
  <div>
    <KuRootView />
  </div>
</template>
```

--------------------------------

### Complete UniKuRoot Configuration Example

Source: https://uni-ku.js.org/projects/root/configuration

This comprehensive example combines all previously discussed configuration options for UniKuRoot, including custom root file name, global ref injection, custom view tag name, conditional debug mode, and page exclusion patterns. It provides a template for a fully customized Root setup.

```javascript
// vite.config.(js|ts)
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // Place UniKuRoot after plugins that might modify pages.json
    UniKuRoot({
      // Custom virtual root component filename
      rootFileName: 'KuRoot',
      
      // Enable global automatic injection of App.ku instance
      enabledGlobalRef: true,
      
      // Custom view tag name
      viewTagName: 'AppView',
      
      // Enable debug mode (conditionally for development)
      debug: process.env.NODE_ENV === 'development',
      
      // Exclude pages that do not require the root component
      excludePages: [
        'src/pages/login.vue',
        'src/pages/register.vue',
        'src/error-pages/**'
      ]
    }),
    Uni()
  ]
})
```

--------------------------------

### Create Virtual Root Component for CLI Projects

Source: https://uni-ku.js.org/projects/root/installation

Creates the `App.ku.vue` file within the `src` directory for Uniapp CLI projects configured with UniKu Root. This component serves as the entry point for Root's rendering within the application.

```vue
<!-- src/App.ku.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const helloKuRoot = ref('Hello AppKuVue')
</script>

<template>
  <div>{{ helloKuRoot }}</div>
  <KuRootView />
</template>


```

--------------------------------

### Configure Vite to Introduce UniKuRoot Plugin

Source: https://uni-ku.js.org/projects/root/getting-started

This snippet shows how to import and use the UniKuRoot plugin in your Vite configuration file. Ensure UniKuRoot is placed after any plugins that modify pages.json. This configuration is for both CLI and HBuilderX projects.

```javascript
// vite.config.(js|ts)
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // 若存在改变 pages.json 的插件，请将 UniKuRoot 放置其后
    UniKuRoot(),
    Uni()
  ]
})
```

--------------------------------

### Configure UniKu Root with TypeScript Options

Source: https://uni-ku.js.org/projects/root/faq

This example demonstrates how to configure UniKu Root in a TypeScript project. It shows how to define options for the plugin and includes type safety for those options.

```typescript
import { defineConfig } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import type { RootPluginOptions } from '@uni-ku/root'

const rootOptions: RootPluginOptions = {
  // 配置选项
}

export default defineConfig({
  plugins: [
    UniKuRoot(rootOptions),
    Uni()
  ]
})
```

--------------------------------

### Use Root Component in a Page

Source: https://uni-ku.js.org/projects/root/getting-started

This snippet demonstrates how to use the root component's functionality within a standard Uniapp page. It includes a simple message and text indicating that the content will be rendered in the location of the '<KuRootView />' component defined in the root component.

```vue
<!-- src/pages/index.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Hello from page!')
</script>

<template>
  <view>
    <text>{{ message }}</text>
    <text>这是页面内容，将被渲染到 App.ku.vue 中的 KuRootView 位置</text>
  </view>
</template>
```

--------------------------------

### Create Virtual Root Component for HBuilderX Projects

Source: https://uni-ku.js.org/projects/root/installation

Defines the `App.ku.vue` file at the root of an HBuilderX Uniapp project to integrate UniKu Root. This component acts as the container for Root's UI elements.

```vue
<!-- App.ku.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const helloKuRoot = ref('Hello AppKuVue')
</script>

<template>
  <div>{{ helloKuRoot }}</div>
  <KuRootView />
</template>


```

--------------------------------

### Configure Root Component in Monorepo (App 2)

Source: https://uni-ku.js.org/projects/root/faq

This example configures UniKu Root for another sub-project in a monorepo. It enables global referencing and excludes specific pages using glob patterns.

```javascript
// apps/app-2/vite.config.js
import UniKuRoot from '@uni-ku/root'

export default {
  plugins: [
    UniKuRoot({
      rootFileName: 'App2Root',
      enabledGlobalRef: true,
      excludePages: ['src/pages/special/**']
    })
  ]
}
```

--------------------------------

### Install UniKu Root using Package Managers

Source: https://uni-ku.js.org/projects/root/installation

Installs the UniKu Root package as a development dependency using common package managers. The `-D` flag ensures it's added to devDependencies, as Root is primarily used during development.

```shell
pnpm add -D @uni-ku/root

```

```shell
yarn add -D @uni-ku/root

```

```shell
npm install -D @uni-ku/root

```

--------------------------------

### Access Root Component Instance Locally

Source: https://uni-ku.js.org/projects/root/faq

This example demonstrates how to access the exposed methods and data of the root component from a page component using a `ref` and passing it to the `root` attribute in the template.

```vue
<!-- src/pages/*.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const rootInstance = ref()
</script>

<template root="rootInstance">
  <view>
    <button @click="rootInstance.showMessage()">调用根组件方法</button>
  </view>
</template>
```

--------------------------------

### Basic UniKuRoot Plugin Setup in vite.config.js/ts

Source: https://uni-ku.js.org/projects/root/configuration

This snippet shows the basic integration of the UniKuRoot plugin within a Vite project's configuration file. It demonstrates how to import the plugin and include it in the Vite `defineConfig` plugins array. This setup is the foundation for applying any custom Root configurations.

```javascript
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UniKuRoot({
      // Configure Root options here
    }),
    Uni()
  ]
})
```

--------------------------------

### Upgrade UniKu Root using Package Managers

Source: https://uni-ku.js.org/projects/root/installation

Updates the UniKu Root package to the latest version using package managers. It's recommended to check release notes and back up configurations before upgrading.

```shell
pnpm update -D @uni-ku/root

```

```shell
yarn upgrade -D @uni-ku/root

```

```shell
npm update -D @uni-ku/root

```

--------------------------------

### Mount Global Toast Component to Root

Source: https://uni-ku.js.org/projects/root/getting-started

This snippet shows how to integrate the GlobalToast component into the main App.ku.vue file. By including both '<KuRootView />' and '<GlobalToast />' in the template, the toast component becomes available globally and can be triggered from any page.

```vue
<!-- src/App.ku.vue -->
<script setup lang="ts">
import GlobalToast from '@/components/GlobalToast.vue'
</script>

<template>
  <KuRootView />
  <GlobalToast />
</template>
```

--------------------------------

### Monorepo Integration with UniKuRoot (App 1)

Source: https://uni-ku.js.org/projects/root/configuration

Provides a configuration example for UniKuRoot within a monorepo structure, specifically for 'app-1'. It demonstrates how to set a custom `rootFileName`, `enabledGlobalRef`, and `viewTagName` for this specific sub-project, isolating its configuration from other potential applications in the monorepo.

```javascript
// apps/app-1/vite.config.js
import UniKuRoot from '@uni-ku/root'

export default {
  plugins: [
    UniKuRoot({
      rootFileName: 'App1Root',
      enabledGlobalRef: false,
      viewTagName: 'App1View'
    })
  ]
}


```

--------------------------------

### Monorepo Integration with UniKuRoot (App 2)

Source: https://uni-ku.js.org/projects/root/configuration

Presents a UniKuRoot configuration for 'app-2' within a monorepo. This example showcases setting a distinct `rootFileName`, enabling `enabledGlobalRef`, and defining a specific `viewTagName`. It also includes an example of using `excludePages` for this particular application.

```javascript
// apps/app-2/vite.config.js
import UniKuRoot from '@uni-ku/root'

export default {
  plugins: [
    UniKuRoot({
      rootFileName: 'App2Root',
      enabledGlobalRef: true,
      viewTagName: 'App2View',
      excludePages: ['src/pages/special/**']
    })
  ]
}


```

--------------------------------

### Configure Root Component in Monorepo (App 1)

Source: https://uni-ku.js.org/projects/root/faq

This example shows how to configure UniKu Root for a specific sub-project within a monorepo. It customizes the root filename and disables global referencing.

```javascript
// apps/app-1/vite.config.js
import UniKuRoot from '@uni-ku/root'

export default {
  plugins: [
    UniKuRoot({
      rootFileName: 'App1Root',
      enabledGlobalRef: false
    })
  ]
}
```

--------------------------------

### Configure Vite for UniKu Root in CLI Projects

Source: https://uni-ku.js.org/projects/root/installation

Configures the Vite build tool to include the UniKu Root plugin in Uniapp CLI projects. This involves importing the plugin and adding it to the Vite configuration, ensuring it's placed correctly if other plugins modify `pages.json`.

```javascript
// vite.config.(js|ts)
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // 若存在改变 pages.json 的插件，请将 UniKuRoot 放置其后
    UniKuRoot(),
    Uni()
  ]
})


```

--------------------------------

### Enabling Global Auto Injection of App.ku Instance (enabledGlobalRef)

Source: https://uni-ku.js.org/projects/root/configuration

This example shows how to enable global automatic injection of the App.ku instance by setting `enabledGlobalRef` to `true`. Once enabled, you can access the root component instance using `getCurrentPages()`. This allows for easier access to root component methods and data across different pages.

```javascript
// vite.config.(js|ts)
UniKuRoot({
  enabledGlobalRef: true
})
```

```html
<!-- src/pages/*.vue -->
<script setup lang="ts">
import { onMounted, ref } from 'vue'

const pagesStack = getCurrentPages()
const uniKuRoot = ref()

onMounted(() => {
  uniKuRoot.value = pagesStack[pagesStack.length - 1].$vm.$refs.uniKuRoot
})
</script>
```

--------------------------------

### Multi-Environment Configuration with Vite

Source: https://uni-ku.js.org/projects/root/configuration

Demonstrates how to configure UniKuRoot dynamically based on the Vite build mode (development vs. production). This allows for different settings like root file names, global reference enablement, debugging, and page exclusions per environment. It requires Vite's `defineConfig` and `loadEnv` functions.

```javascript
import { defineConfig, loadEnv } from 'vite'
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return defineConfig({
    plugins: [
      UniKuRoot({
        // 开发环境使用默认配置，生产环境自定义文件名
        rootFileName: mode === 'development' ? 'App' : 'ProdRoot',
        
        // 生产环境启用全局引用
        enabledGlobalRef: mode === 'production',
        
        // 开发环境启用调试
        debug: mode === 'development',
        
        // 生产环境排除更多页面
        excludePages: mode === 'production' 
          ? ['src/pages/login.vue', 'src/pages/test/**']
          : ['src/pages/test/**']
      }),
      Uni()
    ]
  })
}


```

--------------------------------

### Uninstall UniKu Root using Package Managers

Source: https://uni-ku.js.org/projects/root/installation

Removes the UniKu Root package from the project using the corresponding package manager command. After uninstallation, manual steps are required to clean up configuration files and code.

```shell
pnpm remove @uni-ku/root

```

```shell
yarn remove @uni-ku/root

```

```shell
npm uninstall @uni-ku/root

```

--------------------------------

### 挂载 Wot 组件至 App.ku.vue (Vue)

Source: https://uni-ku.js.org/projects/root/examples

在 Uni-App 的根组件 `App.ku.vue` 的模板中，直接添加 `<wd-toast />` 和 `<wd-notify />` 标签，以全局挂载 Wot Design Uni 的 Toast 和 Notify 组件。

```vue
<!-- src/App.ku.vue -->
<script setup lang="ts">
// 可以在这里添加一些全局逻辑
</script>

<template>
  <!-- 页面内容将渲染在这里 -->
  <KuRootView />
  
  <!-- 全局挂载 Wot 组件 -->
  <wd-toast />
  <wd-notify />
</template>

```

--------------------------------

### Dynamic Root Configuration by Environment (Vite)

Source: https://uni-ku.js.org/projects/root/faq

Configure the Root plugin dynamically based on the environment mode. This allows for different root configurations (e.g., filenames, global references, excluded pages) in production versus development environments. It uses Vite's `loadEnv` to access environment variables.

```javascript
// vite.config.(js|ts)
import { defineConfig, loadEnv } from 'vite'
import UniKuRoot from '@uni-ku/root'

export default ({ mode }) => {
  const isProduction = mode === 'production'
  
  return defineConfig({
    plugins: [
      UniKuRoot({
        rootFileName: isProduction ? 'ProdRoot' : 'DevRoot',
        enabledGlobalRef: isProduction,
        excludePages: isProduction 
          ? ['src/pages/test/**']
          : []
      })
    ]
  })
}

```

--------------------------------

### Implement Global Toast Component

Source: https://uni-ku.js.org/projects/root/getting-started

This code defines a reusable global toast component and its associated composable function. The component displays a toast message and allows it to be hidden. The composable provides functions to show and hide the toast, managing its visibility state.

```vue
<!-- src/components/GlobalToast.vue -->
<script setup lang="ts">
import { useToast } from '@/composables/useToast'

const { globalToastState, hideToast } = useToast()
</script>

<template>
  <div v-if="globalToastState" class="toast-wrapper" @click="hideToast">
    <div class="toast-box">
      welcome to use @uni-ku/root
    </div>
  </div>
</template>

<style scoped>
.toast-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast-box{
  background: white;
  color: black;
}
</style>
```

```javascript
// src/composables/useToast
import { ref } from 'vue'

const globalToastState = ref(false)

export function useToast() {
  function showToast() {
    globalToastState.value = true
  }
  
  function hideToast() {
    globalToastState.value = false
  }
  
  return {
    globalToastState,
    showToast,
    hideToast,
  }
}
```

--------------------------------

### Root Component Lifecycle in App.vue (Uniapp)

Source: https://uni-ku.js.org/projects/root/features

Shows how to implement Uniapp lifecycle hooks within the root component (`App.ku.vue`) using UniKuRoot. It demonstrates the usage of `onLaunch`, `onLoad`, `onShow`, and `onReady` for initialization and event handling.

```vue
<!-- src/App.ku.vue -->
<script setup lang="ts">
import { ref, onLaunch, onLoad, onShow, onReady } from '@dcloudio/uni-app'

const appData = ref('')

onLaunch(() => {
  console.log('Root onLaunch')
  appData.value = 'App initialized'
})

onLoad(() => {
  console.log('Root onLoad')
})

onShow(() => {
  console.log('Root onShow')
})

onReady(() => {
  console.log('Root onReady')
})
</script>

<template>
  <div>
    <div>{{ appData }}</div>
    <KuRootView />
  </div>
</template>
```

--------------------------------

### 创建 ConfigProvider 组件 (Vue)

Source: https://uni-ku.js.org/projects/root/examples

创建一个 Vue 组件 `ConfigProvider`，它使用 `useTheme` composable 来初始化和提供主题配置给整个应用。它还在组件挂载时调用 `initTheme`。

```vue
<script setup lang="ts">
import { provide, onMounted } from 'vue'
import { useTheme } from '@/composables/useTheme'
import type { ThemeConfig } from '@/types/theme'

// 初始化主题
const { currentTheme, initTheme } = useTheme()

// 提供主题配置给子组件
provide('themeConfig', currentTheme)

// 组件挂载时初始化主题
onMounted(() => {
  initTheme()
})
</script>

<template>
  <div class="config-provider" :class="`theme-${currentTheme.mode}`">
    <slot />
  </div>
</template>

<style>
/* 全局主题变量 */
:root {
  --theme-primary-color: #007aff;
  --theme-secondary-color: #5ac8fa;
  --theme-background-color: #ffffff;
  --theme-text-color: #000000;
  --theme-border-color: #e5e5e5;
  --theme-border-radius: 8px;
}

/* 暗色主题 */
.theme-dark {
  color: var(--theme-text-color);
  background-color: var(--theme-background-color);
}
</style>

```

--------------------------------

### 挂载 ConfigProvider 至 App.ku.vue (Vue)

Source: https://uni-ku.js.org/projects/root/examples

在 Uni-App 的根组件 `App.ku.vue` 中，导入并使用 `ConfigProvider` 组件来包裹整个应用。同时，它还初始化了主题并提供了一个切换主题的按钮。

```vue
<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'
import ConfigProvider from '@/components/ConfigProvider.vue'

// 初始化主题
const { themeMode, toggleTheme } = useTheme({
  primaryColor: '#07c160'
})
</script>

<template>
  <ConfigProvider>
    <div class="app-root" :class="`theme-${themeMode}`">
      <div class="app-header">
        <h1>Root 主题示例</h1>
        <button @click="toggleTheme()">
          切换主题 (当前: {{ themeMode }})
        </button>
      </div>
      
      <!-- 页面内容将渲染在这里 -->
      <KuRootView />
    </div>
  </ConfigProvider>
</template>

<style scoped>
.app-root {
  min-height: 100vh;
  transition: background-color 0.3s, color 0.3s;
}

.app-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--theme-border-color);
}

button {
  padding: 8px 16px;
  background-color: var(--theme-primary-color);
  color: white;
  border: none;
  border-radius: var(--theme-border-radius);
  cursor: pointer;
}
</style>

```

--------------------------------

### Get Root Component Instance Locally in Page

Source: https://uni-ku.js.org/projects/root/features

This Vue script shows how to obtain a reference to the root component instance locally within a specific page. It uses `ref` in the template and `onMounted` to access exposed methods and data from the root component.

```vue
<!-- src/pages/*.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'

// Create ref object, name must match the 'root' attribute in the template
const uniKuRoot = ref()
const message = ref('')

onMounted(() => {
  // Access exposed methods and data via ref
  if (uniKuRoot.value) {
    message.value = uniKuRoot.value.exposeRef
  }
})

function callRootMethod() {
  if (uniKuRoot.value) {
    const result = uniKuRoot.value.showMessage('Hello from page!')
    console.log(result)
  }
}
</script>

<!-- Use the 'root' attribute to specify the ref name -->
<template root="uniKuRoot">
  <view>
    <text>Exposed value: {{ message }}</text>
    <button @click="callRootMethod">Call Root Method</button>
  </view>
</template>
```

--------------------------------

### Get Root Component Instance Globally in Page

Source: https://uni-ku.js.org/projects/root/features

This Vue script shows how to access the globally enabled root component instance from a page. It uses `getCurrentPages()` to retrieve the page stack and then accesses the root component's ref via `$vm.$refs.uniKuRoot`.

```vue
<!-- src/pages/*.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'

const uniKuRoot = ref()
const counter = ref(0)

onMounted(() => {
  // Get root component instance via getCurrentPages()
  const pagesStack = getCurrentPages()
  if (pagesStack.length > 0) {
    uniKuRoot.value = pagesStack[pagesStack.length - 1].$vm.$refs.uniKuRoot
    counter.value = uniKuRoot.value?.globalCounter || 0
  }
})

function increment() {
  if (uniKuRoot.value) {
    counter.value = uniKuRoot.value.incrementCounter()
  }
}
</script>

<template>
  <view>
    <text>Global Counter: {{ counter }}</text>
    <button @click="increment">Increment</button>
  </view>
</template>
```

--------------------------------

### 配置 Wot Design Uni (TypeScript)

Source: https://uni-ku.js.org/projects/root/examples

在 `main.ts` 文件中配置 Wot Design Uni 组件库，使用 `app.use()` 方法将其注册到 Vue 应用实例中。

```typescript
// src/main.ts
import { createSSRApp } from 'vue'
import App from './App.vue'
import WotDesignUni from 'wot-design-uni'

export function createApp() {
  const app = createSSRApp(App)
  app.use(WotDesignUni)
  return {
    app
  }
}

```

--------------------------------

### Customizing the View Tag Name (viewTagName)

Source: https://uni-ku.js.org/projects/root/configuration

This example shows how to change the default tag name for the root view component from `KuRootView` to a custom name, like `AppView`, using the `viewTagName` option. After configuring this, you must update the virtual root component (e.g., `src/App.ku.vue`) to use the new tag name.

```javascript
// vite.config.(js|ts)
UniKuRoot({
  viewTagName: 'AppView'
})
```

```html
<!-- src/App.ku.vue -->
<template>
  <div>
    <AppView />
  </div>
</template>
```

--------------------------------

### Configuring UniKuRoot with TypeScript in Vite

Source: https://uni-ku.js.org/projects/root/features

Demonstrates how to integrate UniKuRoot into a TypeScript project by configuring vite.config.ts. It shows the import of necessary types and the instantiation of the plugin with options.

```typescript
// vite.config.ts
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot, { UniKuRootOptions } from '@uni-ku/root'
import { defineConfig } from 'vite'

const options: UniKuRootOptions = {
  rootFileName: 'KuRoot',
  enabledGlobalRef: true,
  excludePages: [
    'src/pages/login.vue'
  ]
}

export default defineConfig({
  plugins: [
    UniKuRoot(options),
    Uni()
  ]
})
```

--------------------------------

### 在 UniApp 根组件中封装全局 Toast 和 Notify 方法

Source: https://uni-ku.js.org/projects/root/examples

演示如何在 UniApp 的根组件 (`App.ku.vue`) 中封装全局可用的 Toast 和 Notify 方法，这些方法可以被封装成全局函数供所有页面调用。该示例展示了如何使用 `console.log` 作为 Toast/Notify 的模拟实现，并注释了如何集成 Wot 组件。

```vue
<script setup lang="ts">
import { ref } from 'vue'

// 封装全局方法
function showGlobalToast(message: string, type = 'info') {
  // 这里可以使用任何 Toast 实现
  console.log(`Global Toast: ${message} (${type})`)
  
  // 如果使用 Wot 的 Toast
  // const toast = useToast()
  // toast[type](message)
}

function showGlobalNotify(message: string, type = 'info') {
  // 这里可以使用任何 Notify 实现
  console.log(`Global Notify: ${message} (${type})`)
  
  // 如果使用 Wot 的 Notify
  // const notify = useNotify()
  // notify({ message, type })
}

// 暴露给页面使用
defineExpose({
  showGlobalToast,
  showGlobalNotify
})
</script>

<template>
  <KuRootView />
  <wd-toast />
  <wd-notify />
</template>

```

--------------------------------

### Enable Global Root Component Reference

Source: https://uni-ku.js.org/projects/root/faq

Enabling `enabledGlobalRef` in the Vite configuration allows you to access the root component instance globally, simplifying access from any page.

```javascript
// vite.config.(js|ts)
UniKuRoot({
  enabledGlobalRef: true
})
```

--------------------------------

### Configure Vite for UniKu Root (JavaScript)

Source: https://uni-ku.js.org/projects/root/faq

This configuration sets up the UniKu Root plugin and the standard Uni plugin in your Vite build process. Ensure this is placed in your project's root `vite.config.js` file.

```javascript
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UniKuRoot(),
    Uni()
  ]
})
```
Tokens:
Raw