I'm really curious if I use NuxtJS right.. I just want to generate HTML pages, so basically I dont need ANY JavaScript!
But Everytime I do generate any page with Nuxt There is a lot of JS in there.
Now I managed to remove ClientSide Scripts with:
render: {
injectScripts: false
},
in the nuxt.config.js .. but now anyway there is a inlineJS script with:
window.__NUXT__={staticAssetsBase:"/_nuxt/static/1614565042",serverRendered:!0,routePath:'"/"'}
or even
<script>window.__NUXT__={staticAssetsBase:"/_nuxt/static/1614566041"}</script>
<script src="/_nuxt/3dacfb6.js" defer></script>
<script src="/_nuxt/47380cc.js" defer></script>
<script src="/_nuxt/fbdf180.js" defer></script>
<script src="/_nuxt/77b577f.js" defer></script>
<script src="/_nuxt/04f2e32.js" defer></script>
in the generated HTML.. I dont understand why there is not a simple mode to just generate very simple HTML pages without ANY overhead.
Its just about re-using components for me and using some very simple variables..
No JS have to be used at all and CSS I'm generating & combining with YARN, so no need for anything else..
Also i dont like the data-* tags .. I really dont need them. I want to create simple HTML pages with no function on clientside, but still having the function of "components" which is injected (serverside) and re-use in multiple pages.
I run Nuxt with this config:
target: 'static',
render: {
injectScripts: false
},
hooks: {
'vue-renderer:ssr:context'(context) {
const routePath = '';
context.nuxt = '';
},
},
to remove as much JS and standard stuff as possible... but seems it still not possible to remove Everything and just generate a plain HTML without anything extra.
So the question is:
How can I generate static pages with NuxtJS and not having to include ANY JS file.. specially not the standard NUXT-JavaScript code?
If you think I better should not use NuxtJS for simple clean HTMl pages tell me :)
Nuxt is not meant to be used as SSR only, it does have the whole hydration part that will bring interactivity to your app even when going full static. You could probably use another SSG like 11ty or hugo to not have any JS loaded.
But you can also use vue-lazy-hydration and prevent the hydration at the top level of your app. It's still kinda in beta but it should do the trick.
“If you think I better should not use NuxtJS for simple clean HTMl pages tell me :)”
You would be better off not using Nuxt. It’s a JavaScript framework built on top of Vue, which makes it super simple to develop SSR SPA applications.
You mention you don’t want to use JavaScript, but you would like access to components and simple variables. To me it sounds like you’d be much better off using PHP, and might enjoy the Laravel framework (though I’d recommend plain old PHP if you don’t want the overhead of an entire framework).
Laravel
Related
I'm new to Vue 3 and I just created my first real life Vue project.
I would like to use and distribute this component (and it's subcomponents) to be used in any html page.
It's easy, right?
<div id="app"></div>
<script src="/js/chunk-vendors.99a5942c.js"></script>
<script src="/js/app.042d60b5.js"></script>
But how can I pass parameters to the main component when reusing it in some ordinary html page?
Parameters can be passed and read as globals:
<div id="app"></div>
<script>
window.myNamespace = { foo: 1 };
</script>
...
Or be passed as attributes and read from app element:
<div id="app" data-foo="1"></div>
...
This is suitable when Vue application is used as a sub-application (widget). For framework-agnostic reusable components, web components have to be used.
So I'm not sure what you're specific use case is, but if you're interested in making a multi-page app (MPA), then I suggest taking a look at the answer posted here.
What you would be doing here is actually mounting an instance of the Vue App itself onto an element every html page, and then pass props to that and it's children. Vue itself doesn't really support passing props to the root instance using element attributes, and it isn't the recommended way of using the framework, but if you are still interested in going down this route, I suggest taking a look at this answer here.
What I would suggest doing instead is taking a look at creating components, and passing those around. You can make separate files for each, and render them all in the main page, no need to create other pages. If that's something you're interested in, I suggest taking a look at routes or the making your project a multi-page app (MPA) instead of a single-page app (SPA) although the same concept would still apply, passing components to your main instance and building your app that way.
For passing parameters to components in Vue 3 I would suggest taking a look at the props page on the documentation here for more details.
I hope this is helpful! I tried my best to be thorough, I do suggest reading through the full documentation however!
I am trying a new way of writing my ui and I am using straight ESM loading with Vue. As such I am trying to load my HTML files like I would with say Webpack. I have a simple example of what I am talking about. I basically want to take...
export default {
template: "<div>Here is the component. I want this template to be an html file without webpack</div>"
// I want this to be from a url say mysite.net/viewport.html
}
I tried the simple things like
import Template from "/viewport.html"
But of course that didn't work
I think there might be something I can do with dynamic components. Has anyone tried this an come up with a good solution?
I have a very, very simple set of Vue components that all work. These are a simple addition on top of an existing C# app.
At the moment, these are .html files (brought into the app inside <script> tags) and .js files loaded by reference.
These all work, are very light weight, and I love it.
Now I want to compile the HTML for each component into a Vue render function, and the .js into one minified .js file.
The .js to .min.js is pretty standard, but I cannot figure out how to get the HTML to compile into the Vue render function. Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform, and I don't need a full web application spun up. I only need my existing, simple templates transformed to something more friendly for production than my long-form html templates getting dumped to the page.
I'm not entirely opposed to turning the .html+.js into .vue files, but just doing that doesn't seem to overcome my issue.
I cannot figure out how to get the HTML to compile into the Vue render function
To generate a render function from a Vue template string (e.g., read from an HTML file), you could use vue-template-compiler like this:
const compiler = require('vue-template-compiler')
const output = compiler.compile('<div>{{msg}}</div>')
console.log(output) // => { render: "with(this){return _c('div',[_v(_s(msg))])}" }
Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform
The "web server" you mention is provided by Webpack CLI, and is intended to faciliate development. You don't need to use the dev server. The article indeed describes several steps in manually setting up a project to build Vue single-file-components, but a simpler method is to use Vue CLI to automatically scaffold such a project.
This might be a bit of an odd question, but I'll try to explain.
I'm looking to build a vue based video player widget for a client's Drupal website. The idea is to create something he can just drop in, like a JQuery plugin. However, I'd really like to leverage Vue's Single File Components (with Webpack) so I can keep everything all bundled together.
My first thought would be to use the Vue CLI, npm build and then reach into the dist/ folder and pull out the following to drop in:
<link href=/static/css/app.cf6f127cf50f4c0b2424d30fdc56c3a4.css rel=stylesheet>
<div id="my-widget"></div>
<script type=text/javascript src=/static/js/manifest.e12c1c4a9566f686d69f.js></script>
<script type=text/javascript src=/static/js/vendor.47037dd92c40b3f38949.js></script>
<script type=text/javascript src=/static/js/app.3f1bab5cc5b1be1127b2.js></script>
Although this feels off, is there a better way to achieve this? Keep in mind his website is NOT a Vue app, but I want this widget to be built LIKE a Vue app.
I don't know if I understand 100 percent, as far as I know, it is possible. It doesn't matter how you bundle your app. It is a matter of architecture. You can use vue.js partly, like widget.
First when you set Vue instance, just set element with your target element.
new Vue({
el: '#my-widget'
});
If you want your client to set element himself, make some functions to create vue widget. (considering multiple vue instance or state sharing blah blah...)
// you can provide simple function like this (I'm sure it needs to be more.)
const Widget = {
createWidget(el) {
new Vue({
el: el
});
}
};
// on client side
Widget.createWidget('#his-widget');
On bundling, if you want your widget to be bundled together with client's Drupal website. Let him import your widget like other libraries. You can build your widget with npm run build in vue-cli and then give it to him so that he can include it.
Thanks to #yuriy636 for answering my question. The CLI 3.0 allows to build as a library or a web component. docs
Also I found the following article which goes into more depth
https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/
I'm exploring Electron and I've run into a roadblock. I can't figure out how to load the Dojo Toolkit and use it in Electron.
For example, here is the simple "Hello World" for Dojo:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
That works fine in a browser, but doesn't work at all in Electron. After a couple hours of googling and trying 50 different experiments I've gotten nowhere.
Can someone please enlighten me?
While you can disable node-integration as Shwany said, I believe that will effectively render the ipc modules useless, which will probably pose undesirable limitations since you won't be able to communicate between the main and renderer processes.
However, it is possible, with a bit of finagling, to get Dojo to play nice with Electron. There are only a couple of things you need to do in your entry page.
Firstly, force the host-node has feature to false. This can be done by setting it in dojoConfig.has, e.g.:
var dojoConfig = {
async: true,
has: {
'host-node': false
}
}
Secondly, as Shwany pointed out, Dojo is going to see the already-existing require, so we need to move that out before loading Dojo:
// Move Electron's require out before loading Dojo
window.electronRequire = require;
delete window.require;
After loading dojo.js, you can move Dojo's require elsewhere and move Electron's back, if you wish. Whether you want to do this may depend on how you intend to code the client side of your application. Ostensibly, Dojo's global require is never needed, since you can request a context-sensitive require in any defined module via the 'require' module ID.
If you want to see a scaffolded Electron application incorporating Dojo, I created a boilerplate a few weeks ago (though be advised it's currently relying on a fork of electron-packager). If you want to see an example of a more full-blown Electron/Dojo application, I wrote a music player called Nukebox a couple of months ago which uses Dojo and dgrid (though its scaffolding is a bit different than the newer boilerplate).
I have your test code working in Electron.
First, I assume you are trying to load dojo.js from the web. //ajax.googleapis... etc will probably attempt to pull the file from the file system. I added http: to the front of it. That allowed me to open a .html file in the browser and work. I am not sure if that was an oversight or not.
Secondly, because the browser-window has node-integration on by default, 'require' is already defined and it does not understand what you are passing to it because it expects a path not an array. If you construct your browser window with node-integration turned off it should work:
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600, "node-integration": false});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Note the "node-integration": false. This may cause additional issues if you want to use node integrations in your app. However, your code should work.