How to use a NUXT component in another site - javascript

I have a working NUXT application with various pages and components in universal mode. Now I need to render one of the components on another static html site.
I can easily export a regular Vue application's component just adding a bundle script and div element to which the components renders.
But how can I do it with NUXT?

Nuxt is not really meant for a quick plug (with a script tag) but for an SSR usage (with some NodeJS build), so I highly doubt that you can make this. Or at least, I don't really see the point if you only use it as an SPA component.
If somebody knows a solution to make it work, I'm all yours on your opinion on this.

Related

difference between _app.js and document.js

I downloaded html css template and trying to integrate in "nextjs". What is difference between "_app.js" and "document.js"? where should i use/include "css, js" files? either in "_app.js" or inside "document.js" ?
As nextJS docs specify related to _app.js:
Next.js uses the App component to initialize pages. You can override it and control the page initialization and:
Persist layouts between page changes
Keeping state when navigating pages
Custom error handling using componentDidCatch
Inject additional data into pages
Add global CSS
Next page of the docs also specify that _document.js is:
A custom Document can update the and tags used to render
a Page. This file is only rendered on the server, so event handlers
like onClick cannot be used in _document.
So basically your global css should go in App.js. However if you need to import certain CDN styles for some libraries I suppose you can do that here as well (but you should probably consider using just _app.js for this as well as it can be seen in this example)
Regarding the JS question as wikipedia states:
Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.
So basically you should import React components where you need them, but I would recommend you to follow a tutorial if you need to learn more about React (There are a lot of beginner NextJS tutorials that can cover this).

Creating a Javascript bundle with a few components for reuse

I have a backend rendered page (django in case it matters) which I want to soup up a little using some components from PrimeVue and a markdown editor packaged as a vue component. Right now, we have a few small animations using jquery for which we include jquery from a CDN directly into our pages. A few months ago, we needed to spice up a page using some more client side interactivity and we included vue.js via a CDN onto that page (dropping jquery) and then wrote some javascript in an index.js that we also loaded up from a CDN and got our work done. This is the current state of affairs. The page currently looks like this
<html>
....
<script src="https://cdn/vue.js"></script>
<script src="/static/index.js"></script>
The div #mainvue is where vue runs and does what it needs to.
This is where we are now.
Using plain vue is okay. Now, I'd like to throw in a few components from primevue as well as a 3rd party markdown editor that's wrapped as vue component. I want to bundle all of these as wel as plain vue itself into a single javascript bundle that I can throw onto a CDN and include into all my pages. Then my devs can do their day to day work in the index.js.
Is this a reasonable approach and if so, how do I do it? I'm not familiar with the javascript ecosystem. If not, what's the right way to solve this problem. I don't want to go all the way SPA and REST API. I just want to use a few 3rd party components and vue on a simple otherwise backend rendered page.
Since you mention you don't want to "go all the way SPA," a reasonable hybrid to is to use Vue in MPA (multi-page app) mode. This will require using a vue-cli/webpack configuration to compile your Vue components into bundles, but once you have this build pipeline, these bundles can used in individual Django templates via django-webpack-loader. Information can be passed from Django via template variables directly as Vue component properties.
Re bundling, yes you can bundle all these resources into a single JS using this method, but it's nearly as easy (and far more performant) to create one or more common bundles that represent shared logic (third party libs, invidual components, even Vue itself) and then pick and choose from among these bundles as needed on individual Django templates.
The steps to implement are a bit too involved to post directly here, but I've written a series of articles Django + Vue -- Best of Both Frontends that explains. There's also a cookiecutter for boostrapping new projects using this method. I realize you already have a site, but you can perhaps adapt the implementation there.
Good hacking!

Vuejs 2.0+ how to use exteneral webcomponents in template of vue component

I am fairly entrenched in the Vue ecosystem, but there is plenty more that I am learning. I recently came across a scenario that I do not know how to approach.
In short, there is a rollup-ed JavaScript file containing some webcomponents that are not Vue. I would like to use these in a Nuxtjs spa. However, using these components in other vue components is proving a bit cumbersome.
I have tried a variety of approaches, e.g.
Locally (in a dockerized environment), I can sandwich my nuxt / vue spa in between these external components by altering src/app.html, on the linked codesandbox however, they do not render correctly
I have tried binding the components to a vue component template via v-html
I have tried Vue.config.ignoredElements
I have tried binding the components with the script tag that injects them
and various combinations thereof. I am providing a codesandbox to play with.
To see the correct behavior, please go to /app.html and copy lines 10-41 into a empty local html file and open it in your browser.
Any ideas how I can get these to play nice?
The only thing I found so far is this article:
https://alligator.io/vuejs/vue-integrate-web-components/
which is where I got the Vue.config.ignoredElements idea

Is it possible for Vue Web Components to have listeners or interact some other way?

I am trying to develop multiple Vue.js components written as .vue single file components. The requirements is that such components need to be embedded by front-end designers directly into HTML using element.
Since i cannot achieve this with default compilation method provided by webpack, i figured out it could be done by compiling (more correctly, transpiling) as web components.
Is it possible to use Vue Web Components with listeners as you would with regular Vue Components?
<some-web-component #some-event="someFunction()"></some-web-component>
I couldn't find any examples of this, all which i found had only a simple component with some props, displaying a message. Is this even possible?
If not, is there some other way to achieve communication between Web Components?
Similarly asked here:
https://forum.vuejs.org/t/using-vue-single-page-components-directly-in-html/66384
For anyone wondering the same, I've found the solution to be using Vuex store.

Import Vue Component only when added to blade pages

i'm starting to develop an app using Laravel, Vuejs, and blade for template engine.
Firstly, i'm new in Vuejs's world, and maybe is a simple task, but i didn't find an answer in any discussion.
The core idea is to use .blade page, and, when i need vuejs components, add them in the page passing server's data with props array. Everything's working fine, but after playing around for a bit, i've noticed one probably furure problem.
In the laravel's documentation, we register the component, or whatever Vue setting in app.js: then, using laravel mix, we boundle in a single file all the code(e.g imports, requires, different js pages...), and finally we load "app.[hash].js" in our page with a script tag. I've noticed that even only using a few vue components, app.js growing very fast(of course, we import every components in one file), even dinamically importing components and not setting them globally.
My question is: is normal to boundle all js code in a single file(having a large file), or is there a way to import vue component only when they are added in the .blade files, maybe with some sort of webpack(laravel mix) setting?
Thanks in advance for any support.
Found the solution after post the question:
Marcin and GoogleMac's answer might be both right, but i found an interesting topic about that, and i 'd want to share for anyone could have my problem. I suggest to check out this link https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/, where they talk about code splitting.
I think this could be the best approach, mostly because even in vue's documentation talks about(detail here https://v2.vuejs.org/v2/guide/components.html#Async-Components).
My bad for haven't checked in detail documentations.
It's good to bundle js code in a single file because it's going to be downloaded only one time by the browser and cached.
JavaScript code is not that that big so don't bother yourself with it.
I agree with Marcin's answer, but if you are wanting a workaround, comment out Laravel's built in Vue registration in app.js and just use a cdn in your blade files.
You may add multiple app.js (including multiple router, vuex if needed).
Entry them separately on webpack.mix.js.
And then include suitable app.js file as needed in the blade file.
It's much easier I think if you don't want share some .js code with any user who will not use those component ever.
NB: Of course lazy loading is a solution, but that this is more convenient solution to me as I'll not deliver any component to the user who don't need it.

Categories