@shuimo-design/shuimo-ui-nuxt
TypeScript icon, indicating that this package has built-in type declarations

0.0.1-beta.4 • Public • Published

Shuimo UI Nuxt module

npm version nuxt npm version npm downloads License Nuxt

Shuimo UI module for Nuxt

Features

  • 🧩 Automatically import components and styles on demand.
  • ✨ Provide Some useful layout components.

Quick Setup

  1. Add @shuimo-design/shuimo-ui-nuxt dependency to your project
# Using pnpm
pnpm add -D @shuimo-design/shuimo-ui-nuxt

# Using yarn
yarn add --dev @shuimo-design/shuimo-ui-nuxt

# Using npm
npm install --save-dev @shuimo-design/shuimo-ui-nuxt
  1. Add shuimo-ui to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@shuimo-design/shuimo-ui-nuxt'
  ]
})

That's it! You can now use Shuimo UI in your Nuxt app ✨

Usage

You can use shuimo-ui create a website like this:

Components: MLoadingPreview

We provide a component called MLoadingPreview. you can used it when you want to do some time-consuming operations like preload some assets and show a loading animation.

<template>
  <div>
    <client-only>
      <MLoadingPreview v-model="isLoading" v-if="isLoading" :preInit="preInit"/>
    </client-only>
    <your-main-display-component v-if="!isLoading">

    </your-main-display-component>
  </div>
</template>


<script setup lang="ts">

  const isLoading = ref(true);

  const preInit = async () => {
    await import('ASSET_URL');
    // or other time-consuming operations
    return true;
  };
</script>

Readme

Keywords

none

Package Sidebar

Install

npm i @shuimo-design/shuimo-ui-nuxt

Weekly Downloads

11

Version

0.0.1-beta.4

License

MIT

Unpacked Size

10.7 kB

Total Files

16

Last publish

Collaborators

  • hi_guaifan