Trying to create an embed able Vue Component bundled with Laravel Mix - vue.js

I have created a SPA dashboard using Vue.JS and Laravel, and now would like to create a script that I can use in other sites I manage to just display the event data I am creating in the dashboard via the APIs I have made. I am using Laravel's webpack.mix to do my bundling. Thus far, I haven't really found anything for this situation that explains what I need to do. Any pointers would be helpful, and I can post my code, if I knew what code would be helpful. :)

I didn't entirely understand what you want to do but maybe this project will help. It's a Vue Component bundled using Laravel Mix and deployed to npm: https://github.com/niiknow/vue-datatables-net

Related

NetSuite Suitelet/RESTlet to display VueJS app

I am attempting to build a popup Suitlete that displays a Vue app. It needs to have the ability to pass data back and forth into the transaction that opened it.
Has anyone done this in the past and if so what did the setup for the Vue files and the Suitelet/RESTlet look like? Can't seem to find examples.
You can find projects on GitHub that have great Vue/NetSuite project file setups, ones where you can use Vue CLI to work locally that still work with RESTlets. Here's one https://github.com/michoelchaikin/netsuite-mapreduce-util

Nuxt PWA with themes based on api informations

As part of an agency project, we are working on a PWA that needs to be able to change its theme if an api tells it to.
The pwa already builds its manifest.json from the information returned by our api (via a nuxt plugin executed before rendering).
For theming we have several tracks but this deposit seems to be a good example of what is feasible : https://github.com/adrianjost/nuxtjs-theming
Is it possible via a nuxt plugin (or a module via hooks) to modify the currently selected theme? (i.e. to tell our PWA to get its views first in the selected theme folder) ?
As of right now, it looks like this is not doable with #nuxtjs/pwa module, but you can maybe get some inspiration to make your own solution.
Give a read to this answer and the thread overall: https://github.com/nuxt-community/pwa-module/issues/225#issuecomment-769880254
Having to manually handle workbox may be a solution: https://github.com/nuxt-community/pwa-module/issues/459 or use a totally hand-made solution of course.

How do I build a Vue app to use it in another app?

I'm pretty new to Vue and to dev in general. I was asked to dev an app in Vue.
So I did it, with multiple components, to make the code as maintainable as possible. I also installed dependencies
But now, this app must be usable in another Vue app... And I can't find how to build it so I can import it in another app. I would really appreciate some help. Thank you.
You can use build targets like library or web-component for this.
https://cli.vuejs.org/guide/build-targets.html#app

material-components-web for vue js

I have a website based on Vue framework and webpack.
I came across this css framework developed by Google (Material Components Web) where you can directly get started using a cdn or an npm package. It worked extremely well for a simple html/javascript based website. But, I am having issues setting it up for the Vue project.
There are other wrappers available for Vue framework like Veutify and Vue Material. But, it comes with lot of additional stuff like the grid layout which I don't want the developers to follow as we are already using a flex layout. I only want the component library.
So, is there a way use the Material Components Web with the Vue framework?
I didn't get the Material Components Web working with the Vue framework. But I did found another light-weight material design framework i.e. Material Design Lite.
Note: It is not specific to any framework. It lets you add Material Design look to your website developed in any framework
You can easily get started with a wide variety of options like cdn, bower, npm or even by downloading the files.
Material Components Web has modular architecture. Each component or API is distributed as a separate package. It means that you can use them separately, although there are some dependencies.
Also there is "root" package - material-components-web, which just references all other packages.
By default, when you add a package, it will not be included in your app. You'll need to import component's SCSS and optionally JavaScript. Basically like you would use any other component.
Reference this Vue app template as an example. As you can see here, it references only subset of MDC's components/APIs.

How to create a component to share across websites?

I want to create a Vue component that has fairly large amount of html/css/js.
The goal is someone should be able to add this component to their website, and without having to write their own duplicate html/css they should see roughly the same on their website as it looks on mine.
I've made a component that I can use on my own website, but how can I make it available to use on other websites? Can people just include a .js file perhaps? But how would they import the html/css into a page?
You can prepare your component so that it can be packaged and published on NPM
maybe this post can help you to achieve that How To Publish Your Vue.js Component On NPM