My Nuxt is version 2.15.8
My Node is v14.15.3
I have installed nuxtjs/strapi as a module.
I have also installed strapi v3 wrapper for nuxt 2 as described here.
My module is called in nuxt.config.js
'#nuxtjs/strapi',
My strapi options is also set to localhost:1337, but opening the localhost:1337/admin gives me nothing.
strapi: {
// Options
url: process.env.STRAPI_URL || 'http://localhost:1337',
},
Am I missing something? or is this just not doable with Nuxt v2 ?
As you guessed, you need to have the actual Strapi back office for it to work properly.
Following this guide fixed OP's issue: https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html
Related
Just trying to add authentication to my NuxtJs 3 app folloging nuxt/auth configuration docs, but still get an error during app start:
// nuxt.config.js
export default defineNuxtConfig({
auth: {
// ...
},
modules: [
// '#nuxtjs/axios',
'#nuxtjs/auth-next'
],
})
Received same error for #nuxtjs/axios but I just commented it out since its official documentation indicates to switch to $fetch API.
Cannot figure out where the error is
nuxt-auth is not compatible with Nuxt3 as told here: https://github.com/nuxt-community/auth-module/issues/1805#issuecomment-1326287711
It's on the official roadmap but still not done by the core team.
You could google for a homemade solution online. Thanks to Nuxt3 composables and some logic, it is totally achievable without an official module.
You can use that community one in the meantime, as confirmed here.
At the time being, nuxt/auth module is not supported by Nuxt3.
You can find the list of modules supported by Nuxt3 here https://nuxt.com/modules?version=3.x
You can use this nuxt-auth module which is compatible with nuxt 3: https://nuxt.com/modules/nuxt-auth https://github.com/sidebase/nuxt-auth
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
unfortunately, my most recent application is required to support Internet Explorer 11. This requirement came somewhat suprising to me, so I already built the applications frontend with Vue.js. The backend is written in Laravel, therefore I use laravel-mix/webpack.
This is my app.js:
require('./bootstrap');
window.Vue = require('vue');
Obviously, IE11 doesn't support Vue.js so I tried the following ways of transpiling/polyfilling the code.
1. requiring polyfill
Approach: Adding require("#babel/polyfill"); to the top of my app.js as described in https://babeljs.io/docs/en/babel-polyfill
Result: Following Error Message shown in IE console:
SCRIPT1003: ':' expected
Clearly a compatibility issue, since pre data(){} is invalid in ES < 5
2. using mix.babel
Approach: Adding mix.babel(['resources/js/app.js'], 'resources/js/app.js') to my webpack.mix.js as described in https://laravel.com/docs/5.8/mix (I am using laravel 5.8.36). My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.babel(['resources/js/app.js'], 'resources/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
Result: Same Error Message as in 1
3. using an mix extension
Approach: Installing this extension: https://laravel-mix.com/extensions/polyfill and configure my webpack.mix.js as described. My webpack.mix.js now looks like this:
const mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');
mix.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": "11"}
})
Result: Again, the same Error Message as in 1
4. manually transpiling with babel-cli
Approach: Merely out of desperation I tried to manually transpile my app.js with the following command ./node_modules/.bin/babel ./public/js/app.js --out-dir ./public/js/
Result: Stil no luck, same error as in 1
I am really starting to get frustrated, so any help is much appreciated.
If you can't get Babel-Polyfill to work, you could try using Polyfill.io, which automatically polyfills the selected Polyfills if the browser requires them.
All you need to do is go the Create a polyfill bundle page, and select the polyfills you need. Then once you've made your bundle, copy the URL at the top and add a <script> tag with said URL to your head.
I personally haven't used it with Laravel, but I've previously fought with babel-polyfill myself, and ended up using Polyfill.io since i couldn't get babel-polyfill to work.
When creating a standard vue app (using vue-cli v3.0) and including #feathersjs/feathers in order to implement a connection with a feathers API, I get an error with Internet Explorer 11 (SCRIPT1010: Expected identifier)
The bottom line is to find an easy way to solve issues like this, because on bigger projects one could easily find lots of library issues and sometimes is necessary to support at least one version of Internet Explorer (at least from the business point of view)
I read on feathers site (https://docs.feathersjs.com/api/client.html#module-loaders) that the library uses ES6 so in this case it must be transpiled in order to work in a browser like IE11.
So I tried this but had no luck at all:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathers/commons',
'#feathers/errors',
'#feathers/feathers',
'debug'
]
}
and got errors even in chrome: Uncaught ReferenceError: exports is not defined
I created a project to show this error: https://github.com/riescorp/vue-internet-explorer
One should be able to use IE11 for this app, even if it doesn't work fast or looks nice, but works.
I believe the process should be the same as following the directions on the Vuetify website in the section of this page titled "IE11 & Safari 9 support" (scroll to the bottom): https://vuetifyjs.com/en/getting-started/quick-start
I've not had to do anything else in my projects, that I can remember.
I finally manage to solve this issue.
This is the babel.config.js config that does the trick:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
}
Also there was a typo in my vue.config.js it should look like this:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathersjs',
'debug'
]
}
Finally, when using feathers this line wouldn't work:
.configure(restClient.fetch(window.fetch))
so you can use import 'whatwg-fetch' to solve it (remember to install it npm i whatwg-fetch)
I am using nuxt js. I am trying to install a vue package vue-zoom. Actually few more plugins.
{ src: '~/plugins/zoom', ssr: false },
Here I kept ssr false because it gives errors like document is not defined...
In my plugins/zoom.js file I have this
import Vue from 'vue';
import vZoom from 'vue-zoom'
Vue.use(vZoom);
Now when I am trying to use this plugin like this
<v-zoom :img="`/uploads/${displayImg}`" ></v-zoom>
It gives me the above error.
Any reason or thought how can I use this plugin or similar in nuxt js?
I tried few more all gives similar errors.
Thank you
I got the same error when having the buildDir set to my functions/.nuxt folder, which I was using for SSR via Firebase Functions. I was able to solve the issue by making sure neither nuxt nor vue was installed in the node_modules inside the functions folder.
Are you using a similar setup by chance?