Advice for creating and managing standalone script
I’m thinking of creating a standalone widget script that users can add to their website’s <head> to show some stats from our platform. Ideally, I’d like to keep it within the same Nuxt repository as the platform to make maintenance and deployment easier.
Planning to do even more widget scripts and heavy DOM manipulations in the future, so looking for something that will make my life easier. I looked into Petite-Vue, but it seems unmaintained. I also came across Atomico for web components, but I’m hesitant to dive into a new API like that without being sure it’s the right fit.
I’d really appreciate any advice or suggestions on the best approach to take here!
5 Replies
Hi @Lynx. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, I don't have specific information about creating standalone widget scripts or using Petite-Vue or Atomico within a Nuxt project. However, I can offer some relevant advice based on Nuxt's module system and script management capabilities.
For creating a standalone script within your Nuxt project, you might consider creating a Nuxt module. Nuxt encourages developers to extract reusable parts of their projects into modules. As mentioned in the Nuxt documentation (https://nuxt.com/docs/community/contribution#create-a-module), "If you've built something with Nuxt that's cool, why not extract it into a module, so it can be shared with others?"
Creating a module would allow you to keep your widget script within the same Nuxt repository, making maintenance and deployment easier as you desired. It would also provide a structured way to manage your script within the Nuxt ecosystem.
For script management and loading, Nuxt Scripts offers some powerful features that might be helpful for your use case:
1. Performance optimization: Nuxt Scripts provides performance features (https://scripts.nuxt.com/docs/getting-started#nuxt-script-features) such as triggering script loading only when Nuxt is ready and improved script loading times.
2. Developer Experience: Nuxt Scripts offers simplified script management (https://scripts.nuxt.com/docs/getting-started#nuxt-script-features), including type safety and SSR-compliant APIs.
3. Privacy and Security: Nuxt Scripts includes features for minimizing user data exposure (https://scripts.nuxt.com/docs/getting-started#nuxt-script-features) and enhancing script privacy settings.
If you decide to create your widget as a Nuxt module, you could potentially use Nuxt Scripts to manage the loading of your widget script in a performant and secure manner.
For more detailed guidance on creating modules or using Nuxt Scripts, I recommend checking the official Nuxt documentation or reaching out to the Nuxt community for support, as mentioned in the contribution guide (https://nuxt.com/docs/community/contribution#create-a-module): "If you need help while building it, feel free to check in with us."
Remember, this advice is based on general Nuxt capabilities and may not fully address your specific use case for a standalone widget script. You might need to explore additional resources or seek more specialized guidance for your particular requirements.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@256524650622746624> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
you could consider arrow.js which powers FormKit https://www.arrow-js.com/
ArrowJS
ArrowJS is a tool for programming reactive interfaces using native JavaScript. It’s 2Kb, requires no build tools, has no virtual DOM, and is blazing fast.
depending on what widget you are doing, I would consider use of plain ts/js script without any frameworks, or, if you really can't go without a 'framework' take a look at Lit (from google) or Fast (from MS)
Thanks for the suggestions. i feel alpine is a bit too heavy for what I need, and arrow seems perfect. i will check its limitations and see how mature it is. if it doesnt work out, i will use web components with atomicojs instead of lit
i always find myself reinventing the wheel and checking out how the "frameworks" handled the things, so i want to depend on something