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.
Related
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
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.
I am a beginner of Vue and I am trying to build a multi-page web application with Vue for practice. But I am having this problem below:
Failed to compile.
./src/index/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/index/views/Home.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/components/HelloWorld.vue' in '/home/Username/Web/wk_front_end/src/index/views'
Here is the file tree of my project, every file is generated by Vue because I only want to test the multi-page, so I think it wouldn't be a coding problem.
Here is what I did:
I created a folder called the index under the src folder, I then move all the files and folders that originally under src to index because I wish the components and assets are only used in the corresponding page.
My vue.config.js is:
module.exports = {
pages: {
index: {
entry: "src/index/main.js",
template: "src/index/index.html",
filename: "index.html",
title: "Index Page"
},
}
}
When I try to run it, I got the error above on the chrome window. And actually, the error is:
I think it might be caused by missing of configurations, but I really cannot figure out what those other configurations I need.
Does anyone have similar problem before? Does anyone know how to solve it? Or, does anyone have some successful multi-page example that I could take a look?
Really thanks for the help.
I believe # is a shortcut for the src folder. Which would mean your current path resolves to src/components/HelloWorld.vue.
You could try doing #/index/components/HelloWorld.vue, which should be the correct path.
From my sight you may be importing your Vue components incorrectly. If you want to make multi-page-app why don't you try vue-router ? Maybe it's not the direct solution for your problem but it will help you to better manage your pages (routes) in the future.
I built this site http://danielleandsteven.wedding/ and it loads fine in most browsers. In Safari, I get a lot of errors that it cant load resources and the my-app elem is empty.
A quick glance of the list of 404 resources- it looks like some of them are for nonexistent components and others are in /bower_components/ but its looking for them in the base directory.
I tried it on Edge 15 and I got
Object doesn't support property or method 'call'.
You could add the Babel Polyfills?
https://babeljs.io/docs/usage/polyfill/
it adds some basic function that babel code may depend on - and as you probably served transpiled ES5 code (with babel) to those browsers it might be your problem.
When using Jasmine in a Rails project, to keep the dependencies consistent in my Jasmine specs, I want to pull jquery from a cdn as is done on the real page. I try to do that like so, in my Jasmine.yml file:
helpers:
- http://code.jquery.com/jquery-1.9.1.js
However, this never works, as when viewing the source of the localhost:8888 I get:
<script src="/__spec__/http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
How do you this correctly?
as answered in https://github.com/pivotal/jasmine-gem/issues/135
I wrote a helper to load external javascripts. It's not the best solution (i would prefer config file use) but it works for me.
var head = document.getElementsByTagName('head')[0];
var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('type', 'text/javascript');
jQueryScript.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
head.appendChild(jQueryScript);
#emrox's answer is correct and works for jasmine 2.0.
However in jasmine 2.1.3 it doesn't. This is due to the fact that when the tests are run(i'm using Chutzpah) "http:" isn't pre-pended to the CDN reference. It is in version 2.0 of jasmine.
The fix I implemented that worked involved the following line of code:
jQueryScript.setAttribute('src',
'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
Hopefully this helps someone before they decide to downgrade to 2.0!
Issue 135 made it so you can list CDN entries in your jasmine.yml file. e.g.
src_files:
- http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js
- http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
- lib/javascript/**/*.js