Welcome to Nue JS!

[tipiirai]

👋 Hello, World

Author here. I've been working on this for the past year or so, lately full-time. Happy to answer any questions.

[jaredcwhite]

@tipiirai As a fan of petite-vue and other Vue-like syntax/tooling out there, this seems really rad! I look forward to seeing how the ecosystem expands.

One question: I encapsulate a lot of the frontend work I do these days within custom elements (web components). If you squint, a lot of the features in Nue JS would be great to add to web components (WCs have their own lifecycles/props, but really need help on the template binding/reactivity front!). I've experimented before with "embedding" petite-vue apps/components inside of WCs, and it's possible but a bit hacky. It'd be amazing if Nue JS could mount inside an HTMLElement subclass and Just Work:tm:. Any thoughts about that?

[soulrx]

Hey this looks really cool! Just noticed in the readme / whatev is says "Tree reasons why Nue scales extremely well", which should read "Three reasons why Nue scales extremely well".

[soulrx]

git commit --amend
Hmm... me thinks I replied to the wrong thing.

[tipiirai]

Thanks! I really liked the use of word "rad" :) Nice old-school style.

I'm using web component-based mounting (or "hydration" if you will) on the create-nue repository. See:

https://github.com/nuejs/create-nue/blob/master/www/setup.js

How does that look? What kind of web component support are you looking for?

[soulrx]

👋 Hello, World

Author here. I've been working on this for the past year or so, lately full-time. Happy to answer any questions.

Is this library CSP (Content Security Policy) compliant? One of the things holding me back from trying out htmx.js was that in order to ensure it is CSP compliant, I would have to forgo like a 1/3 of its benefit.

In any case, this looks super awesome. Great work!

[tipiirai]

It sure is! The compiled JavaScript uses native JavaScript functions and does not use eval() or new Function()

[tschuehly]

Hello,

just wondering is it possible to use nue.js by importing just a script tag like alpine.js?

[tipiirai]

Unfortunately no. And I'm not planning to either. I want Nue to be CSP compliant (see above) and I want the client-side stay as lean as possible. I also don't want to maintain two versions of the tool. I'm sure this is a turndown for many, but it's the price I have to pay.

[neneodonkor]

Interesting Nue is my name too. 😁 I am from Ghana.

I will be keeping an eye on your project and I am interested in seeing how the CSS will look like, although I am comfortable with putting my CSS in the same place 🤭🤭🤭

[tipiirai]

Hey Nue! Nice to meet you 🙃

[neneodonkor]

Thanks sir. 😁

[ledihildawan]

[ledihildawan]

Don't answer my question, I just got it. https://nuejs.org/faq/#ts

[ledihildawan]

Hello, how can I get highlight code on VSCode.

Also I have a problem when npm start

Then I solve the package.json file like this

[richard483]

hello! I just exploring NueJS and found this annoying haha, for getting syntax highligth on vs code I select the languege mode from the bottom rigth of the wiindow:

then, configure the file association for ".nue":

then select the html:

done! but there are 1 problem where vscode addressing this syntax as error like this:

for now this is better than not getting a syntax higthlight (beside changing the extension to '.htm'), but can anyone solve this problem?

[tipiirai]

Nice job!

[ledihildawan]

Why when I change modified layout.nue file, there aren't fast refresh?

[mustafa-hanif]

hot reload or fast refresh is not yet released, you'll have to manually use a file watcher and restart the server everytime.

[jaeyson]

looking forward to this cool thing 👌🏾.

PS. I'm excited with the duo! nue + bun = nueb

[seneca]

I'm looking forward to the other pieces coming together.
Also, it would be great to have Web Components supported as standard. This may be possible already.
Didn't really dig into the project that much yet.

[seneca]

I would love to see Web Components supported on nue as defined by Web Components Specification. Just import WC library and use it. The way I view this project is that it aims to be as close to the Web "metal" as possible so WCs is now a standard way of creating User Interfaces and supporting them would be extremely beneficial to this project in my humble opinion.
So, yes, I would love to see more extended support for web components here.

[tipiirai]

I like the idea. What is a WC library? Is there an example of React/Vue/Svelte integration/compatibility with that script?

[seneca]

I'm sure you know where to look for Web Components Specification but one of them can be found here:
https://www.webcomponents.org/specs

For a Web Components Library please see the following link:
https://www.abeautifulsite.net/posts/shoelace-2/

and this one is from Goggle:
https://lit.dev

Unfortunately, it's beyond my knowledge how to make them work in frameworks but, as far as I know, all this technology is implemented by all modern browsers. So It's a matter of loading them somehow. But this is where other contributors may come in and help.

[tipiirai]

Thanks. I'm aware of the specification as well as the Lit project. I mostly want to understand what it means to have "Web Components supported as standard". What would it mean for the user of Nue? What is the problem it solves / what are the benefits?

I'm not sure if I want to support an interface like this:

export class SimpleGreeting extends NueElement {

}

I feel it goes against the philosophy of Nue being an HTML- first library and designed for UX developers instead of JS developers. But I may consider supporting some kind of setup on the page where Nue would pick all custom elements, their data, and dependencies and automatically bring those "islands of reactivity" alive.

[jaredcwhite]

@tipiirai I'd inquired about this previously…I think what I'd like to see is more like "in my custom element I've already started writing, I'd like to mount a Nue app/component/island (whatever you call that) inside of my component so it can do all the cool reactive stuff and event handlers, etc." It may not be super trivial because generally a web component API has props/attributes that are part of that element instance, so I'm not sure Nue's own props can just get merged in. That was an issue I had before trying to get petite-vue mounted in and working as part of a web component. Possible, but not easy. Also, if folks want their reactivity enabled in a component's shadow DOM, that may or may not work seamlessly depending on if the library knows about shadow DOM or not.

Anyway, just some thoughts.

[MichaelYuhe]

Will there be a communty for Nue?
BTW, just deployed a Nue app in Zeabur, Nue is awesome!

[tipiirai]

Nice. The Zeabur UI looks impressive! Regarding the community question. I was planning to have the discussion here on GitHub, but maybe Discord would be better?

[MichaelYuhe]

Yep, I think Discord would be much better. We are running a Discord community too, it's really helpful for both developers and users.

[tipiirai]

Good idea. My only worry is that time goes into chatting and answering questions and less time on coding. But I'll create one: likely tomorrow. It will be for the "HC" users only at first, hidden from the public.

[MichaelYuhe]

Can I be one of them? 😃

[tipiirai]

Haha. You'll be the special OG — "Original Gangster" member. Sorry., I got caught up in coding and will postpone this. On my mind!

[hichem-dahi]

Is Nue reactive? and if so, How does reactivity work?

[tipiirai]

Yes. Nue is reactive. The reactivity works differently from React, ie. there is no dom diffing. Nue traverses the dom tree and mutates it based on the state. I'll write a more detailed article at some point.

[tipiirai]

Another important thing on Nue is that the components are class based. Just like React used to be. I feel it makes the most sense for state management and general usability. And no need to take uncommon paths like $ref(), $state() or let $count = rune(0)

[hichem-dahi]

From a Vue.js perspective, it may seem unnecessary to add the reactive, ref, and related keywords into the reactivity. While they can simplify certain tasks, they might lead to a less favorable developer experience.

[hmthanh]

Hi tipiirai
Does NueJS have plan to support TailwindCSS?

[tipiirai]

Nue allows you to add TW classes to components like in other frameworks. Or what kind of support are you looking for? In general Nue promotes semantic CSS and separation of concerns, which are the guiding principles in the upcoming Nue CSS project. See:

https://nuejs.org/docs/nuejs/styling-components.html
https://nuejs.org/tools/

[tipiirai]

Hey! This discussion is splitting into many directions. Please post a new discussion if you have a new topic. I'll close this one once all the threads are closed. Thanks!

[darkhorse007]

This is surprisingly good news for the frontend. I'm looking forward to the release of Nue's entire ecosystem. Thank you @tipiirai

[tipiirai]

Thank you @darkhorse007!

[tipiirai]

Closing this one. See: #1 (comment)

[duansz1]

no good to say

[tipiirai]

Can you be more specific? Thanks