The module `"anu-vue/dist/types"` "has no exported member `"presetCore"` . about anu

[evanlong0803]

Yes, I'm using Nuxt3 and I'd like to use anu-nuxt with it

[evanlong0803]

Why not use lang="scss"?

Because I'm not going to use the precompiler again after I use Unocss，I really like Unocss combined with css.
postcss will focus more on compatibility, that's enough

[evanlong0803]

We do provide css file for preset-theme-default in latest code changes however this isn't released yet.

Do you mind adding SCSS package for now? installation guide

No problem, I'll try

[jd-solanki]

Love to have you 😇

[jd-solanki]

Hi,

You need to update the include option in uno.config.ts as below:

include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],

I will update the package so it doesn't require this include in next release. I will update the docs as well.

[evanlong0803]

Awesome 🥳

For handling light & dark you have to toggle the .dark class on html tag.

Thanks for reminding me 😊

Have you ever created module in nuxt?

No, I only use Nuxt3 because I need SEO for my blog. More of my time would probably be spent creating aesthetically pleasing HTML elements, as I am interested in this 😉

[evanlong0803]

Hey, I think this issue is resolved now. I also update the docs that includes nuxt instructions: https://github.com/jd-solanki/anu/blob/main/docs/guide/getting-started/installation.md

However, docs will apply from next release, for now, you can continue with your setup.

Can we close this?

No problem, I'm sorry I didn't help you 🥲

[jd-solanki]

You need to import presetAnu instead of presetCore if you are using v0.11.0

[evanlong0803]

I use it according to README.md in the anu-nuxt directory

[jd-solanki]

Oh, we need to update that.

Thanks for reporting. Are you using anu-nuxt?

[jd-solanki]

Did you managed to work it with presetAnu?

[evanlong0803]

I am going to try

[evanlong0803]

export default defineNuxtConfig({
  modules: ['@vueuse/nuxt', '@anu-vue/nuxt', '@unocss/nuxt', '@pinia/nuxt'],
  experimental: {
    reactivityTransform: false,
    inlineSSRStyles: false,
  },
  css: ['@unocss/reset/tailwind.css', 'anu-vue/dist/style.css'],
})

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'
import { presetScrollbar } from 'unocss-preset-scrollbar'
import { promises as fs } from 'fs'

import { presetAnu, presetIconExtraProperties } from 'anu-vue'
import { presetThemeDefault } from '@anu-vue/preset-theme-default'

export default defineConfig({
  shortcuts: [
    ['primary-text-size', 'text-xl'],
    ['primary-text-color', 'text-gray4'],
    ['position-center', 'top-[50%] left-[50%] -translate-x-[50%]  -translate-y-[50%]'],
    [
      'btn-primary',
      'p-(x-2 y-1) border-2 border-dark-50 rounded transition-all flex justify-center items-center hover:border-gray-400 active:bg-dark-300',
    ],
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.4,
      collections: {
        custom: {
          'left-bg': () => fs.readFile('./assets/left.svg', 'utf-8'),
          'right-bg': () => fs.readFile('./assets/right.svg', 'utf-8'),
        },
        carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default as any),
      },
      extraProperties: presetIconExtraProperties,
    }),
    // anu-vue presets
    presetAnu(),
    presetThemeDefault(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // sans: 'DM Sans',
        // serif: 'DM Serif Display',
        // mono: 'DM Mono',
        mono: ['Fira Code', 'Fira Mono:400,700'],
        // custom ones
        lobster: 'Lobster',
        lato: [
          {
            name: 'Lato',
            weights: ['400', '700'],
            italic: true,
          },
          {
            name: 'sans-serif',
            provider: 'none',
          },
        ],
      },
    }),
    presetScrollbar({
      scrollbarWidth: '7px',
      scrollbarTrackColor: '#00000000',
      scrollbarThumbColor: '#615f5f8c',
    }),
  ],
  include: [/.*\/anu-nuxt\.js(.*)?$/, './**/*.vue', './**/*.md'],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  theme: {
    breakpoints: {
      // 平板
      tablet: '640px',
      // 笔记本
      laptop: '1080px',
      // 电脑
      desktop: '1280px',
    },
  },
})

Unfortunately, after I used it, I couldn't display the style.😢（The console reported no error）

[jd-solanki]

You might be missing preset-theme-default styles:

import '@anu-vue/preset-theme-default/dist/styles.scss'

[jd-solanki]

Above is JS import, you have to adjust it according to nuxt. Maybe write in css option along with anu styles.

[evanlong0803]

You might be missing preset-theme-default styles:

import '@anu-vue/preset-theme-default/dist/styles.scss'

export default defineNuxtConfig({
  modules: ['@vueuse/nuxt', '@anu-vue/nuxt', '@unocss/nuxt', '@pinia/nuxt'],
  experimental: {
    reactivityTransform: false,
    inlineSSRStyles: false,
  },
  css: ['@unocss/reset/tailwind.css', 'anu-vue/dist/style.css', '@anu-vue/preset-theme-default/dist/styles.scss']
})

And it turns out to be：
[vite-node] [plugin:vite:css] [VITE_ERROR] /node_modules/.pnpm/@[email protected]/node_modules/@anu-vue/preset-theme-default/dist/styles.scss

[jd-solanki]

Can you please share full screenshot?

[evanlong0803]

Above is JS import, you have to adjust it according to nuxt. Maybe write in css option along with anu styles.

And I use postcss which cannot be introduced in App.vue

<style lang="postcss">
@import '@anu-vue/preset-theme-default/dist/styles.scss';

html,
body,
#__nuxt {
  @apply w-full h-100vh m-0 p-0  bg-dark-800 fixed z-5 text-white scrollbar;
}
/* * {
  cursor: url(https://api.iconify.design/carbon:3d-cursor.svg?height=16), default !important;
} */
</style>

[jd-solanki]

Why not use lang="scss"?

[jd-solanki]

So, did you managed to make it work?

[evanlong0803]

So, did you managed to make it work?

Not yet. I have to think about it😂

[jd-solanki]

Can you please share the full screenshot when you use

css: ['@unocss/reset/tailwind.css', 'anu-vue/dist/style.css', '@anu-vue/preset-theme-default/dist/styles.scss']

[evanlong0803]

Can you please share the full screenshot when you use

css: ['@unocss/reset/tailwind.css', 'anu-vue/dist/style.css', '@anu-vue/preset-theme-default/dist/styles.scss']

You mean an error message that the client is reporting?

[jd-solanki]

Yep. It should work according to me.

[evanlong0803]

Can you please share the full screenshot when you use

css: ['@unocss/reset/tailwind.css', 'anu-vue/dist/style.css', '@anu-vue/preset-theme-default/dist/styles.scss']

[jd-solanki]

We do provide css file for preset-theme-default in latest code changes however this isn't released yet.

Do you mind adding SCSS package for now? installation guide

[evanlong0803]

We do provide css file for preset-theme-default in latest code changes however this isn't released yet.
Do you mind adding SCSS package for now? installation guide

No problem, I'll try

I executed 'pnpm add -D sass sass-loader'.

This is the end result（The console reported no error）：

It seems like it only has color, but the core effect doesn't.

[jd-solanki]

let me check by creating new nuxt project. Will update the README today.

Thanks for reporting 👍🏻

[evanlong0803]

let me check by creating new nuxt project. Will update the README today.

Thanks for reporting 👍🏻

I like your project very much, and I will help contribute in the future 😊

[evanlong0803]

Hi,

You need to update the include option in uno.config.ts as below:

include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],

I will update the package so it doesn't require this include in next release. I will update the docs as well.

Ok

[evanlong0803]

Hi,

You need to update the include option in uno.config.ts as below:

include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],

I will update the package so it doesn't require this include in next release. I will update the docs as well.

With the effect of 👍：

Expect the preset-theme-default css file 😊.

[jd-solanki]

Awesome 🥳

For handling light & dark you have to toggle the .dark class on html tag.

---

Have you ever created module in nuxt?

[jd-solanki]

Let's keep this issue open for now. I will fix the nuxt module (maybe I will need help) and afterward we will close this.

[evanlong0803]

Let's keep this issue open for now. I will fix the nuxt module (maybe I will need help) and afterward we will close this.

Ok.

maybe I will need help

What can I do for you?🤔

[jd-solanki]

When we wrote the nuxt module we didn't have preset-theme-default as a separate package.

ATM we are just adding single CSS file in packages/anu-nuxt/src/module.ts however we also need include SCSS for preset-theme-default but when I add this line to packages/anu-nuxt/playground/package.json anu-nuxt's node_modules don't get @anu-vue/preset-theme-default.

🤔

[evanlong0803]

When we wrote the nuxt module we didn't have preset-theme-default as a separate package.

ATM we are just adding single CSS file in packages/anu-nuxt/src/module.ts however we also need include SCSS for preset-theme-default but when I add this line to packages/anu-nuxt/playground/package.json anu-nuxt's node_modules don't get @anu-vue/preset-theme-default.

🤔

I guess it is because the corresponding package is not obtained correctly.

pnpm add @anu-vue/preset-theme-default -D

[jd-solanki]

Hey, I think this issue is resolved now. I also update the docs that includes nuxt instructions: https://github.com/jd-solanki/anu/blob/main/docs/guide/getting-started/installation.md

However, docs will apply from next release, for now, you can continue with your setup.

Can we close this?