Closed evanlong0803 closed 1 year ago
You need to import presetAnu
instead of presetCore
if you are using v0.11.0
I use it according to README.md
in the anu-nuxt
directory
Oh, we need to update that.
Thanks for reporting. Are you using anu-nuxt?
Yes, I'm using Nuxt3
and I'd like to use anu-nuxt
with it
Did you managed to work it with presetAnu
?
I am going to try
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)
You might be missing preset-theme-default styles:
import '@anu-vue/preset-theme-default/dist/styles.scss'
Above is JS import, you have to adjust it according to nuxt. Maybe write in css
option along with anu styles.
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/@anu-vue+preset-theme-default@0.11.0/node_modules/@anu-vue/preset-theme-default/dist/styles.scss
Can you please share full screenshot?
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>
Why not use lang="scss"
?
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
So, did you managed to make it work?
So, did you managed to make it work?
Not yet. I have to think about it😂
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']
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?
Yep. It should work according to me.
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']
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
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
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.
let me check by creating new nuxt project. Will update the README today.
Thanks for reporting 👍🏻
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 😊
Love to have you 😇
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.
Hi,
You need to update the
include
option inuno.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
Hi,
You need to update the
include
option inuno.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 😊.
Awesome 🥳
For handling light & dark you have to toggle the .dark
class on html
tag.
Have you ever created module in nuxt?
Awesome 🥳
For handling light & dark you have to toggle the
.dark
class onhtml
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 😉
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.
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?🤔
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
.
🤔
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 topackages/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
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?
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 🥲
import { presetCore, presetThemeDefault } from 'anu-vue'