npm package: @impoh/nuxt
Description: vite-ssr-api,ssr,vue,nuxt
Author: impoh
Latest version: 0.0.7-beta.7

# nuxt  plug-in

The core code is nuxt-core，Mainly in order to reduce the burden of the frame, and the APi use is consistent, the new useGet, useSet, the use of the two methods please see lodash.js

[Presentation page](https://www.impoh.com/) 

[document](https://nuxt.com/docs/api/composables/use-app-config)

[github address](https://github.com/impohcom/nuxt)

[template-vue](https://github.com/impohcom/nuxt/tree/main/examples/template-vue)

##  Supported apis

``` js
export { useGet, useSet } from './core/lodash.js'
export { ClientOnly } from './core/components.js'
export { createHead, renderHeadToString, useHead } from '@vueuse/head'
export { useAsyncData, useLazyAsyncData, useNuxtData, refreshNuxtData, clearNuxtData } from "./core/asyncData.js"
export { useHydration } from "./core/hydrate.js"
export { useState, clearNuxtState } from "./core/state.js"
export { clearError, createError, isNuxtError, showError, useError } from "./core/error.js"
export { useFetch, useLazyFetch } from "./core/fetch.js"
export { useCookie } from "./core/cookie.js"
export { useRequestHeaders, useRequestEvent, useRequestFetch, setResponseStatus } from "./core/ssr.js"
export { onNuxtReady } from "./core/ready.js"
export { useNuxtApp } from './core/nuxt.js'
```

##  components

```vue
	<ClientOnly> slots .... </ClientOnly> 
```





## build config

New packaging configuration properties added 【[external](https://cn.vitejs.dev/config/ssr-options.html#ssr-external)、[noExternal](https://cn.vitejs.dev/config/ssr-options.html#ssr-noexternal)】

vite.config.js 

```js
import path from 'node:path'
import { defineConfig } from 'vite'

import ViteNuxtPlugin from '@impoh/nuxt/plugin'


export default defineConfig(({ command, ssrBuild }) => ({
  base: '/',
  resolve: {
    alias: {
      '@': path.resolve(process.cwd(), './src')
    }
  },
  plugins: [

    ViteNuxtPlugin({
      // 打包时打包对应依赖
      ssr: {
        noExternal: [
          'element-plus',
          'markdown-it',
          'markdown-it-anchor',
          'markdown-it-attrs',
          'markdown-it-container',
          'markdown-it-emoji',
          'nanoid',
          // 'picocolors',
          // 'shiki',
          'shiki-processor',
          'url'
        ]
      }
    }),
  ],

}))

```



### console.log颜色

```sh
{
    'bright'    : '\x1B[1m', // 亮色
    'grey'      : '\x1B[2m', // 灰色
    'italic'    : '\x1B[3m', // 斜体
    'underline' : '\x1B[4m', // 下划线
    'reverse'   : '\x1B[7m', // 反向
    'hidden'    : '\x1B[8m', // 隐藏
    'black'     : '\x1B[30m', // 黑色
    'red'       : '\x1B[31m', // 红色
    'green'     : '\x1B[32m', // 绿色
    'yellow'    : '\x1B[33m', // 黄色
    'blue'      : '\x1B[34m', // 蓝色
    'magenta'   : '\x1B[35m', // 品红
    'cyan'      : '\x1B[36m', // 青色
    'white'     : '\x1B[37m', // 白色
    'blackBG'   : '\x1B[40m', // 背景色为黑色
    'redBG'     : '\x1B[41m', // 背景色为红色
    'greenBG'   : '\x1B[42m', // 背景色为绿色
    'yellowBG'  : '\x1B[43m', // 背景色为黄色
    'blueBG'    : '\x1B[44m', // 背景色为蓝色
    'magentaBG' : '\x1B[45m', // 背景色为品红
    'cyanBG'    : '\x1B[46m', // 背景色为青色
    'whiteBG'   : '\x1B[47m' // 背景色为白色
}

```