Comments (4)
Have you followed the installation instructions: https://anu-vue.netlify.app/guide/getting-started/installation.html#nuxt
from anu.
I had similar issues with Nuxt 3 (3.0.0
) and Anu 0.11.0
, but I managed to make it work with some tweaks.
I made a demo app on codesandbox here: Nuxt 3 + Anu + UnoCSS
Here are the necessary config files:
package.json
:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"nuxt": "3.0.0"
},
"dependencies": {
"@anu-vue/nuxt": "^0.11.0",
"@anu-vue/preset-theme-default": "^0.11.0",
"@unocss/nuxt": "^0.48.0",
"@unocss/preset-icons": "^0.48.0",
"@unocss/preset-uno": "^0.48.0",
"nuxt-icon": "^0.1.8",
"sass": "^1.57.1"
}
}
nuxt.config.ts
at the root of the project:
// nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
css: [
"@anu-vue/preset-theme-default/dist/styles.scss",
],
modules: [
"@anu-vue/nuxt",
"@unocss/nuxt",
"nuxt-icon",
],
unocss: {
// presets
uno: true, // enabled `@unocss/preset-uno`
icons: true, // enabled `@unocss/preset-icons`
attributify: true, // enabled `@unocss/preset-attributify`,
// core options
shortcuts: [],
rules: [],
},
})
Vite config file:
// vite.config.ts
import Unocss from "unocss/vite"
import { presetAttributify, presetUno } from "unocss"
export default {
plugins: [
Unocss({
presets: [
presetAttributify({ /* preset options */ }),
// presetUno(),
// ...custom presets
],
}),
],
}
Uno config file:
import { presetCore, presetIconExtraProperties } from "anu-vue"
import { presetThemeDefault } from "@anu-vue/preset-theme-default"
import {
defineConfig,
presetIcons,
presetUno,
} from "unocss"
export default defineConfig({
presets: [
presetUno(),
presetIcons({
scale: 1.2,
extraProperties: presetIconExtraProperties,
}),
// anu-vue preset
// presetAnu(),
presetCore(),
// default theme preset
presetThemeDefault(),
],
include: [/.*\/anu-vue\.js(.*)?$/, "./**/*.vue", "./**/*.md"],
})
And usage in app.vue
:
<template>
<div flex h-full>
<nav p-8 b-r>
<div mb-8>Mail</div>
<ABtn color="primary">Button</ABtn>
<Icon name="ri:inbox-fill" size="1.5em" />
</nav>
<div m-16>
<span>Hi, hello everybody! π </span>
</div>
</div>
</template>
I think that maybe a dedicated page to install Anu for Nuxt should exist, to avoid confusion.
from anu.
I suggest trying v0.12.0.
This is because v0.11.0 of @anu-vue/nuxt
was using anu-vue
v0.10.0. (misaligned)
In v0.12.0 both packages are aligned.
Please give it a try and let us know.
Thanks @rootasjey for sharing the configs π
from anu.
I'm closing this as this is resolved now. Feel free to let me know if you have any issue.
from anu.
Related Issues (20)
- feat: chip closable advance HOT 2
- Styles are not loaded in the latest Nuxt HOT 7
- [docs] Components such as Select and Radio in the document cannot interact HOT 1
- svelte support HOT 1
- nuxt - anu-vue/volar HOT 3
- update vueuse peerDependencies
- WARN [unocss] include option is deprecated, use content.pipeline.include instead. HOT 2
- Tabs border does not respond to window size change HOT 1
- [unocss] include option is deprecated, use content.pipeline.include instead. But, I didn't use include.
- Colors broken with UnoCSS v0.57 HOT 7
- Have a Bug in the switch component? HOT 3
- typescript types errorοΌ HOT 2
- π€Ήπ»ββοΈ Framework stability in Vue Ecosystem & my vision HOT 4
- update vue peerDependencies HOT 1
- How the selection box sets the properties of the display HOT 1
- [Select] Feature request: Groups for the select element
- v1
- List component unusable with TypeScript HOT 4
- ADatatable : event on clicked / hovered
- Style conflict vitepress HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from anu.