feat(anu-nuxt): better support and config

[cpreston321]

Description

Within this PR I enriched the experience with less config leveraging the @unocss/nuxt package preset that already exist. I also added an option within the module config that can be turned off but will disable all the default styling and presets. This gives user the flexibility to turn on or off presets.

/** Nuxt Module Options */
interface PresetThemeOptions {

  /**
   * Import Anu Preset Theme with either CSS or SASS
   * You can either import CSS which doesn't require any additional setup
   * or SASS which requires you to install `sass` dependencies.
   *
   * @default 'css'
   */
  style?: 'css' | 'sass'
}

export interface ModuleOptions {

  /**
   * Import Anu Preset Theme Default | Source npm pkg: `@anu-vue/preset-theme-default`
   * When enabled, it will automatically set up the default presets for Anu and Uno.
   * We recommend to enable this option to get the best experience.
   *
   * @default true
   */
  presetTheme?: PresetThemeOptions | boolean
}

• Updated Docs accordingly.
• Added @anu-vue/preset-theme-default to the module that will directly import the css into the configuration
• Removed unused dependancies defu & @css-render/vue3-ssr from module that had no correlation to the module itself.

Key Takeaways

1. When starting playground I encounter this error for auto imports that I think is to do with the anu-vue dist file.

    Nuxi 3.0.0                                                                                                                                                23:20:19
Nuxt 3.0.0 with Nitro 1.0.0                                                                                                                               23:20:19
                                                                                                                                                          23:20:20
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.50.223:3000/

 ERROR  Failed to resolve import "anu-vue" from "../anu-vue/dist/anu-vue.js". Does the file exist?                                                        23:20:22

ℹ Vite client warmed up in 1240ms                                                                                                                         23:20:23
✔ Nitro built in 558 ms                                                                                                                             nitro 23:20:23
(node:93731) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time                                         23:20:24
(Use `node --trace-warnings ...` to show where the warning was created)

 ERROR  11:20:27 PM [vite] Internal server error: Failed to resolve import "anu-vue" from "../anu-vue/dist/anu-vue.js". Does the file exist?              23:20:27
  Plugin: vite:import-analysis
  File: /Users/cpreston/Documents/projects/contributions/anu/packages/anu-vue/dist/anu-vue.js:2:132
  1  |  import { readonly } from 'vue';
  2  |  import { useConfigurable, useDOMScrollLock, useGroupModel, useLayer, useProps, useSearch, useSort, useSpacing, useTeleport } from 'anu-vue';
     |                                                                                                                                     ^
  3  |  import { inject as $t, computed as C, provide as wt, ref as S, watch as j, unref as c, defineComponent as b, toRef as x, openBlock as y, createElementBlock as g, normalizeClass as $, normalizeStyle as J, createElementVNode as _, createCommentVNode as A, renderSlot as h, toDisplayString as R, createVNode as L, Transition as ne, withCtx as V, withDirectives as U, mergeProps as B, Fragment as Q, createTextVNode as Z, vShow as X, h as We, useAttrs as ye, shallowRef as At, watchEffect as kt, readonly as St, reactive as $e, nextTick as Ee, getCurrentScope as xt, onScopeDispose as Ct, onMounted as Re, isRef as fe, getCurrentInstance as st, createBlock as D, resolveDynamicComponent as Oe, useSlots as at, toRefs as It, createSlots as te, renderList as M, normalizeProps as H, guardReactiveProps as q, vModelCheckbox as nt, Teleport as ke, toRaw as Ot, toHandlers as Vt, onBeforeUnmount as ot } from "vue";

2. There is an upstream bug within the @unocss/nuxt module setup that you can't use include or won't resolve correctly so you have to create a unocss.config.ts file with those includes. That is the only way I seem to get it to work. Also there is a another problem not resolving presets from the module config and things do no merge correctly and will cause it to not work as intended.

Please let me know what you think! I look forward to your feedback.

Thanks,
Christian

[netlify]

✅ Deploy Preview for anu-vue ready!

Name	Link
🔨 Latest commit	f665d43
🔍 Latest deploy log	https://app.netlify.com/sites/anu-vue/deploys/63afa9ac00ad8800080fe745
😎 Deploy Preview	https://deploy-preview-108--anu-vue.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[jd-solanki]

Hi Christian,

Thanks so much for improving the nuxt module. I am really glad to have your contribution. Honestly, I don't have enough experience with the nuxt so your contribution means so much to Anu 🙏🏻

Regarding the takeaways,

• I get failed to resolve imports for vue & vue-router instead of anu-vue. Try running nr dev from root and check again.
• I guess we should have @unocss/preset-uno & @unocss/preset-icons as dep in anu-nuxt pkg json
• Can please mention which upstream bug?
• preset config merging, yes that is know issue I am working on it: presetThemeDefault: Cannot use shortcutOverrides option #41

If you want clean everything please run nr clean && rm -rf node_modules **/node_modules. Doing so might give you error regarding missing deps for preset-uno & preset-icons.

Thanks so much for this high quality PR 😊

[cpreston321]

@jd-solanki

1. Can you try running pn -F @anu-vue/nuxt dev and see if you see the same error? I am still experiencing it.

2. The upstream bug is something I found while testing within the @unocss/nuxt package itself. When defining the unocss prop within nuxt.config.ts like so

export default defineNuxtConfig({
   unocss: {
      // This part takes everything that the `unocss.config.ts` takes to manage config without creating file.
      include: ['./**/*.vue', ....]
   }
})

but for some reason I don't know if something to do with how @unocss/nuxt handles config merging but this option is broke and styles will not resolve. If you create a unocss.config.ts and it has the include: [] it will work as expected.

[jd-solanki]

Hi,

I am getting an error regarding vue & vue-router:

However, If I install those deps explicitly (which we shouldn't) I get the error you shared.

If you got some time feel free to check it out or else I will take a look when I get time.

Have you checked the second point I mentioned?

Thanks.

[cpreston321]

@jd-solanki nuxt recommends that you install deps with

// .npmrc
shamefully-hoist=true
auto-install-peers=true

This will install all peer deps with nuxt so it will resolve correctly. Even when you don't install you get the error you encountered. If you install vue a devDep it will then throw the same error that I am encountering and playground will not work on localhost:3000. Any suggestions? I thought it was because when anu-vue is built it transforms all namespaces and it then cannot import it from the complied dist folder.

Also for your second point I could install those direct deps to anu-nuxt but there should be no reason too since @unocss/nuxt installs all presets for you and it is required for the nuxt ecosystem.

I appreciate your instant feedback! 💚

[jd-solanki]

Hi @cpreston321,

Thanks for reporting the issues. Upon inspection, I found that Failed to resolve import "anu-vue" error was because of improper exports of composables. I have updated the exports in the latest commit but still, the issue is there.

To confirm this comment all the composables in anuComposables from packages/anu-nuxt/src/module.ts and now if you run dev in anu-nuxt it will work fine. However, we are already exporting all the valid composables now. You can check them by importing them in packages/anu-nuxt/src/runtime/plugin.ts.

Can you let me know what addImportSources do, how it works & why it is giving error?

Note: You might not get autocompletion for any import packages/anu-nuxt/src/runtime/plugin.ts if you run nr dev because we are generating types at build time. To get autocompletion first run nr build in root and later try the import. Make sure to comment out useProps after running nr build.

Awaiting your response.

[cpreston321]

@jd-solanki So following up on the issue --

I figured out since you do the imports through the plugin there is no need for addComponent & importSources, the reason behind this is to make a better developer experience when developing since nuxt incorporated auto-imports within the core. Usually you would want to import sources as composables to then give a better typescript support and same for components... Furthermore I took it out for now in favor of just adding the plugin with updated options and some more examples within the playground so you can test and play around with it. Even though you have support for volar there is some things that don't act right so you have to know the components from the docs or know them by heart in order for intellisense to work properly like it normally would in nuxt.

Also in order to make the build process work better after running nr clean && rm -rf node_modules **/node_modules. Running them all recursive had to be changed for it build the correct deps before it build @anu-vue/nuxt unless it would error out everything since the @anu-vue/nuxt relies on these deps locally.

Please let me know what you think and test it out.

I appreciate the feedback.

Thanks,
Christian

[cpreston321]

I also suggest in favor to creating a layer in nuxt as this is more easy to extend a project. I can make this happen and give a PR. Could make since to have both!

Here is some quick docs about layers https://nuxt.com/docs/getting-started/layers

[jd-solanki]

It looks like you have solid experience with nuxt. Thanks for helping me out 🙏🏻

Everything seems fine & tests are also passing 🥳

I have a few questions though

1. Do we need // @ts-expect-error - We know that is a valid preset comments

   View image

   

2. This might be a silly question because I don't know about module development. If we do nuxtApp.vueApp.use(anu, config) this, does this mean all components are globally registered or it will be imported on demand 🤔

3. What about composables? Do users have to import composables themselves?

4. What are the benefits of providing the layer for anu?

Sorry this is taking longer than expected because we live in different timezone, I will try to respond you as soon as possible 😇

Awaiting your response.

[cpreston321]

Hey @jd-solanki !

1. The only reason for this is that if you take them out typescript will throw an error since we are technically piggy backing off unocss options. I tried removing them but kept encountering errors during my test. If you want to try to remove them I'm all for it!

2. Technically nuxtApp.vueApp.use(anu, config) is the same as if you were using vue.use(anu, config) within a native environment. I honestly think they are registered globally within development then tree-shaken out when nuxt run's build.

3. From the testing I did -- you don't need to directly import, Nuxt will try to look it up within the nuxt types registered within the module and then use them.

4. The power of a layers is super flexible and extensive. When using layers you basically have a whole 'default' nuxt project that will then merge to the main layer including config files (e.g unocss.config.ts, 'nuxt.config.ts'), components, server endpoints, dependancies, layouts etc. Basically will take that "layer" then merge it within your own project with ease with almost no setup involved. Under the hood they use unjs/defu to then merge all files together at runtime so it basically seems like magic. I helped write the docs within nuxt layers. I think of it almost like a theme I want use and it will just work out of the box.

Thanks,
Christian

[jd-solanki]

Thanks for the detailed response.

Everything looks fine & great. Regarding layers, I don't have enough experience with nuxt. Anu is now able to provide nuxt support thanks to you and other contributors so I think it will be better for now if we wait for more feature requests for layers.

What's your suggestion?

Now, it looks like we can merge the PR. Can we merge it now?

Thanks for your kind words and valuable contribution 🙏🏻

[cpreston321]

I think it would be viable to do do one last thing in which is to an edge release of the monorepo, so then I can verify everything is working I want to setup a few test for @anu-vue/nuxt

I was running into some problems where the monorepo wouldn't install the correct deps. I want to verify that it will install all the necessary deps to then run smoothly.

[jd-solanki]

I also have a few things to do before a new release. We can surely wait 💯

[cpreston321]

@jd-solanki Do you have pre-release script that will publish the package as v0.0.13-edge so then we could possibly publish now and not effect the main release of anu?

[cpreston321]

Github Workflow: https://github.com/nuxt/framework/blob/0a701ae7b3cae6e18ee26439c20eae8a3f63236f/.github/workflows/ci.yml#L233
Example Bump: https://github.com/nuxt/framework/blob/main/scripts/bump-edge.ts
Example Release Edge: https://github.com/nuxt/framework/blob/main/scripts/release-edge.sh

[jd-solanki]

Unfortunately, we don't such a script. Just to make sure we are both on same boat, edge release and nightly release are the same. They both build & publish the new version on npm every time we make a new push under some npm tag, right?

[cpreston321]

@jd-solanki correct! usually I would assume that you then merge into main then it would release an edge (nightly) to npm so then users can then test breaking changes or the next version release.

[cpreston321]

This is how nuxt handles opting in for edge: https://nuxt.com/docs/guide/going-further/edge-channel

[jd-solanki]

During development, I encountered a situation where I wanted to release anu under nightly but I didn't have set up and didn't find any good resources on how to safely setup this up.

If you know how to setup nightly build we can use that. If not, give me some time I will look into it and setup nightly build to test this out.

Awaiting your response.

[cpreston321]

@jd-solanki #114 it's up 👍🏼

[jd-solanki]

Are we ready to merge?

[jd-solanki]

Moreover, are you on Anu discord channel?

[cpreston321]

@jd-solanki Yes this would be ready to merge.

but I am not!

[jd-solanki]

Hi @cpreston321

May I ask something? With latest commit we don't get autocompletion for components in nuxt playground. Previously we had autocompletion for props and other stuff.

As I don't have experience but nuxt, can you please let me know how we can bring that back?

Awaiting your response.

Regards.

[cpreston321]

@jd-solanki I will definitely look into this! I'll let you know what I find!