Nuxt - HTML Injection by Webpack plugin - vue.js

Currently I'm migrating a Vue.js App to an Nuxt.js App. In our previous setup we used favicons-webpack-plugin to generate favicons during compile-time. These were then injected into the HTML with html-webpack-plugin.
As we want to achieve the same functionality after the migration we need a way to generate these favicons. We came across nuxt-rfg-icon Nuxt-plugin but it does not provided the same feature-set (less generated favicons & the favicons are converted by an online service).
Generally speaking one could use webpack-plugins in Nuxt. So i tried integrating the webpack-plugin, but these favicons are only injected in one of two generated HTML-files. A index.spa.html (favicons present) and a index.ssr.html (favicons not present). When the Page is rendered by Nuxt on the serverside it seems to use the index.ssr.html (seems expected).
So I made a little dive into the #nuxt/webpack package to get some info about how Nuxt configures webpack. There I found this code:
// Generate output HTML for SSR
if (buildOptions.ssr) {
plugins.push(
new HtmlWebpackPlugin__default['default']({
filename: '../server/index.ssr.html',
template: appTemplatePath,
minify: buildOptions.html.minify,
inject: false // Resources will be injected using bundleRenderer
})
);
}
There it says that webpack should disable the automatic injection because the bundleRenderer is doing this. Unfortunately I could not find any resources online on how to inject the HTML of a webpack-plugin into the bundleRenderer. Maybe this is not possible or even intended?
So here is my actual question: How can i get Nuxt to work with the favicons-webpack-plugin?

Related

Vue 2 Cli CSP Build Issue - Eval & new Function Problem

Due to CSP Requirements I have had to convert a static vue application within the Vue 2 CLI environment.
After reading a lot of online documentation I am aware that for CSP compliant vue you need to use Render functions and a runtime version of Vue.js
My problem is that after converting my old static vue application to the Vue CLI build process I am still getting a 'unsafe-eval' is not an allowed message. I am not sure why this is the case, due to Vue 2's cli build process apparently using the CSP compliant runtime vue version, unless otherwise specified in the config file for webpack.
The specific code causing the CSP error (there is only one instance of it) is found in the built/output vendor.js file. The code causing the issue is:
function Ts(t, e) {
try {
return new Function(t)
} catch (n) {
return e.push({
err: n,
code: t
}), D
}
}
I have looked far and wide to figure out why this non CSP compliant code is appearing in Vue's built vendor.js file. Any advice would be great. I have read all of Vue's main documentation on CSP, and should re-iterate that I used Vue 2 CLI for the build and conversion of the static app.
For any other poor soul who have gone down the rabbit hole of Vue.js static to non-compiled CSP conversion, these 2 steps solved my issue:
Manually change csp\build\webpack.base.conf.js '$vue' property to the following:
Click to see image
In your main.js file change vue instantiation to the following pattern, this is needed so the component will mount correctly with the runtime build Click to see image

Nuxt generate failing with self is not defined in a vue dist file

I'm preparing to deploy my first Static app from a Nuxt.js 2 project.
While the static routes are generated fine, my dynamic routes are not. Once I remembered they were hidden in my dropdown menu - duhh - I created a /generate page which renders all my dynamic routes using the nuxt-link component. My assumption was that the crawler should find the /generate/index.vue page and thus the links on it, and crawl those.
It didn't.
Then I noticed a comment from Sebastien Chopin mentioning that SSR should be enabled when generating Static apps. Ok. So I re-enabled SSR and I've hit nothing but errors. A couple I've figured out but this latest one has got me stumped.
Some googling has not revealed a clue that appeared relevant - or at least I didn't recognise them as relevant - so I need the 'worldwide developers' team help.
Does this error suggest there's an issue in Vue itself? I don't use 'self' anywhere in my app code soooo... hmmm?
Cheers,
Jeremy
Well it's generating now (has been for a few weeks, been a busy time!)... however the generated pages are not outputting with content, but I think that's a different issue.
My configuration currently is;
target: 'static',
ssr: false,
generate: {
minify: false, // Nuxt 2.15.4 > Deprecated next major version > Use build.html.minify instead!
routes: dynamicRoutes
}
I'll keep working on it.

Vue components not rendering when #nuxtjs/storybook is used in a Vue Storefront Next project - possibly a Typescript issue?

I am trying to use #nuxtjs/storybook inside a Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) project.
I can get Storybook to open and to show stories, but the component within the stories are not rendered. For example, if I try and use the example from https://storybook.nuxtjs.org/usage then I see a <link> element in devtools (the name of the Vue component), not a rendered <a> element (the content of the Vue component):
I then switched to trying to use another simple component:
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js
But that doesn't work either, you can see an example of that here: https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo (I had trouble getting Storybook to work on Codesandbox).
Vue Storefront Next is based on Nuxt but I had to make a few changes to get Storybook to open:
Update the build section within nuxt.config.js:
babel: {
presets({ envName }) {
return [
[
'#nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
},
ignore: [/[\/\\]core-js/, /#babel[\/\\]runtime/],
},
install #babel/runtime-corejs3, core-js 3, and ts-node
ts-node was necessary because Vue Storefront Next provides a tsconfig.json file for development of part of the project, and that makes #nuxtjs/storybook module think the project is a Typescript project (https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76), but the Vue Storefront project does not use #nuxt/typescript-runtime - I am wondering if this is part of the problem?
You can see the package.json content on Codesandbox: https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json
Any clues as to how to fix this issue would be SUPER appreciated, thank you! I've spent the best part of a day on this but I don't know enough about Storybook or Nuxt to be able to debug it myself, unfortunately :(
It turns out that the #nuxtjs/storybook module seems to be dependent on components: true being set in the project's nuxt.config.js file.
This isn't mentioned anywhere in the #nuxtjs/storybook documentation, but I've raised a Github issue to point this out and will raise a PR against the docs if the maintainer agrees.
You can see my thought process behind how I discovered this issue in this Github thread: https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558

Angular 8 differential loading failing due to auth issues with dotnet core

I recently updated from Angular 7 to Angular 8 using ng update. After following the expected migration path with no issues I built and deployed. Everything worked great until I started checking other browser versions and realized some were getting 401 unauthorized from the server in requesting the js files.
The issue is, the differential loading is done like this:
<script src="main-es2015.1234.js" type="module"></script>
It seems that some browsers, some of the time, don't want to pass auth info for <script type="module" .... It strikes me that there are several ways to work around this:
I can work around this by adding crossorigin="use-credentials" to the script tag but I haven't been able to find how to do that in ng build.
I can tweak the auth settings to somehow allow anonymous requests through to my JS files but I haven't been able to find the dotnet core method of doing this without a lot of complexity. Right now the entire app only allows windows auth. If I allow anonymous I don't want to have to worry somehow that I've left a controller open.
I'm thinking the former option is the cleaner solution but I'm open to alternatives.
Since the posting of the accepted answer the option to handle this in the first way McAden suggests by adding crossorigin="use-credentials" has been added to the Angular CLI options.
Original feature request
Angular CLI documentation
In your angular.json add
{
...,
"build": {
"builder": ...,
"options": {
...
"crossOrigin": "use-credentials"
}
}
}
I modified angular.json and used an explicit deployUrl under projects -> main -> architect -> build -> options:
"deployUrl": "/ClientApp/dist/",
That alters the script tags:
<script src="/ClientApp/dist/main-es2015.1234.js" type="module">
So it no longer goes through the dotnet core application to pull the js file. Then in IIS I set that folder to allow anonymous.

Start Quasat/Vue app inside a plugin Promise

For an app I need to load dynamic configurations (read from external service) before I can bootstrap my Quasar app.
In other Vue apps I use a require.ensure or a Promise in main.js and load the app after everything else is ready, but since Quasar added the concept of App Plugins this won't work anymore as there is no Promises or Chaining available, resulting in race conditions as the App needs configurations that are not available yet.
I looked at their internals and they seem to load plugins in a forEach block from an auto-generated file, not ready for this scenario.
Here's an excerp from the usual solution in main.js (using require.ensure as the file auto-generated on the same server by another service)
require.ensure(['./config.js'], (require) => {
const config = require('.config.js');
// ... use values in config to bootstrap axios, apollo and such
// And finally start the Vue app
new Vue({ ... })
})
Any ideas on how to do this in a Quasar or Webpack way ?
The only alternative I can think of now is to fork&patch Quasar, but maybe I'm missing something and there is another way.