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
Related
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
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 am new to ionic and cordova plugins and I'm trying to implement the sharing of cookies using the cordova-plugin-sfauthenticationsession in my ionic app.
Here is my code based on the documentation provided in this link:
SFAuthSession.start("myScheme://","https://www.facebook.com/",
function(data){
console.log(data);
},function(error){
console.log(error);
}
);
The problem is whenever I try to build my app, the terminal shows an error that it cannot find SFAuthSession. I don't have any idea what I need to import (if any) since it is not included in the documentation. Hope somebody can help me with this.
P.S.
I also tried the safari view controller following this documentation and it is working fine since it provides what is to be imported.
This is a common error. The docs tell you how to install that specific plugin but they don't tell you that you also need to update your module file to include it.
Look at this page:
Ionic Native Community Edition - Ionic Documentation
It explains that you need to import the plugin in a #NgModule and add it to the list of Providers. For Angular, the import path should end with /ngx. Angular's change detection is automatically handled.
To do this you do:
// app.module.ts
import { Camera } from '#ionic-native/camera/ngx';
...
#NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }
So just import your Ionic Native module using that technique and you it should work.
When there is no Ionic Native wrapper
However, based on your comments below it is now clear that there isn't an Ionic Native wrapper for this Cordova plugin.
This means that you will have to either:
Access it without Ionic Native
OR write your own Ionic Native wrapper
It seems like this article on Medium has a great introduction to this:
Build your first Cordova plugin for Ionic Native – Sangkhim Khun – Medium
You have passed beyond my personal experience here but I'm trying to figure it out with you.
Part three of the tutorial has an interesting snippet for accessing a Cordova plugin directly:
declare var cordova: any;
var success = function(result) {
alert(JSON.stringify(result, undefined, 2));
}
var failure = function(result) {
alert(JSON.stringify(result, undefined, 2));
}
cordova.plugins.HelloWorld.coolMethod({
_sMessage: "Hello World"
}, success, failure);
You would have to compare the documentation of your Cordova plugin to adapt this yourself to get it working.
Alternatively, if you continue reading that tutorial it explains how to create an Ionic Native wrapper which you could even contribute back to the project so that everyone can use this feature.
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)
Why is Promise.race([... undefined in the current version of aurelia?
You can see a good example of its use at: Error handling for fetch() in Aurelia
In my aurelia-app build with aurelia-cli only Bluebird core was bundled, but Promise.race is only included in the full version.
In aurelia.json in the section "prepend", change "bluebird.core.js" to "bluebird.min.js"
"prepend": [
"node_modules/bluebird/js/browser/bluebird.min.js",
...
],
Promise.race is supported either by the browser, or by a polyfill you supply. Aurelia does not supply a Promise polyfill. You can use Bluebird (as the skeletons do), or you can use the built-in Promises if you don't need to support older browsers. Current browser support for Promise.race can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
Ok, with Asheley's comment I was able to figure it out. I used bluebird as he suggested:
aurelia.json
...{
"name": "bluebird",
"path": "../node_modules/bluebird/js/browser/bluebird.min"
},...
Inside the class:
...
import {Promise} from 'bluebird';
...
Promise.race([ // is now available
...