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.
Related
i am trying to use nuxt-image on NUXT3, but it seems it doesn't work with the generate command. Images work during dev, but get a 404 when using nuxt generate.
in my nuxt config i have
modules: ["#nuxt/image-edge"],
image: {
dir: "assets/images",
},
then in my files i have
<NuxtImg
format="webp"
class="mobile"
src="/website/home/above-fold-illustration-mobile.png"
alt="illustration"
aria-hidden="true"
/>
So i am wondering if anyone else had a problem or if this is just a compatibility issue with nuxt-image and nuxt3 generate
this is not yet supported, waiting on https://github.com/nuxt/image/pull/614
Reading this part of the documentation
For static provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing dir from static causes 404 errors.
There are other few bugs if you change dir to something else than static apparently.
Can't you stick to static? Will probably avoid you quite some issues IMO.
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
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?
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
I set up a new vue-project that was created using vue ui and manually selecting the features.
The features are the following:
Babel
Router
Vuex
Use config files
and only that, and run the project using the development mode; however, an error occur in the console (Dev tools) showing an unknown elements for router-link and router-view.
https://github.com/JeromeDeLeon/vue-router-bug
That is the repo (a newly created one like hello world program). I already posted an issue on vue-router github page but eventually got closed because they said that everything was working properly, but it is not working for me.
I tried changing the Router to VueRouter on router.js, but the result is still the same.
I tried transferring the code of router.js to main.js, but still not working.
The expected result is to show the content of Home.vue in order to check if router is working.
The actual result shows the "Home | About" only in the top-middle of the browser and nothing else.