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
Related
npm is great to download some js libraries, but including the into a vue app is really hard. i have no idea if there is an "official" way, but searching online i see so many different approaches.
sometimes it is imported in the app.js file, sometimes in the .vue files inside the tags. i have also seen that there are vue plugins that handle differently. how should i know if i have a vue plugin or not? i don't even know what the other option would be. like a vue module instead of a vue plugin?
is there a way that the vue app just includes/imports the stuff from node_modules so i can use it? so that after doing some npm install it is all available?
Npm just downloads the library into the node_modules folder and let's you access it where you need it.
If it's a vue component you need to import it in a vue file, because that's where you need it.
If it's a vue plugin you have to import it in the main js file because that's where it gets initalized in the whole app.
Looks like you are new to vue, I suggest you to take a look at this simple guide where you can learn some basic stuff.
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
I created a vue project using the vue cli:
vue create myproject
I figured that the output when I do npm run build will be a single page application (SPA). What do I need to produce a static website (SSG / Jamstack) with my existing code? I know I could easily do it with Nuxt, but I would like to know how to do it without Nuxt.
EDIT: I think what I meant was to have some of the pages pre-rendered so that it's better for SEO.
To be clear, the result of your build is a SPA that is static HTML and JS. The user may see dynamic content based on the JS, but it's essentially static and could be deployed to Jamstack hosts like Netlify or Vercel. In other words, unless I'm misreading what you want, there isn't anything special you need to do.
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.
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