nuxt-modules / strapi Goto Github PK
View Code? Open in Web Editor NEWStrapi Module for Nuxt
Home Page: https://strapi.nuxtjs.org
License: MIT License
Strapi Module for Nuxt
Home Page: https://strapi.nuxtjs.org
License: MIT License
@nuxtjs/strapi: 0.1.2
nuxt: 2.13.3
run 'nuxt build && nuxt start' and go to localhost:3000 in the browser
The data to display as it does in 'nuxt dev'
The data isn't being returned and no errors are being thrown. It appears that the module doesn't function on build.
Would be great to have the possibility to login with OAuth Providers such as Google or Github and then automatically store the JWT for future requests.
Help pls
After updating the node from 12.x to 14.15, I cannot start the project, I tried to deploy a new project from the github, but I get the same error
ERROR undefined 17:26:14
at fn (node_modules/ky/umd.js:321:0)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Ky._retry (node_modules/ky/umd.js:412:0)
at async HTTP.module.exports../.nuxt/http.js.HTTP.<computed> [as get] (.nuxt/http.js:92:0)
at async asyncData (index.vue:24:0)
Index.vue 24 code:
async asyncData({ $strapi }) {
return {
articles: await $strapi.find("articles", { _sort: "created_at:desc" }),
homepage: await $strapi.find("homepage"),
categories: await $strapi.find("categories"),
global: await $strapi.find("global"),
};
},
Hi,
I was trying to pass an extra session token to the headers of every request. However, even if the Set-Cookie was there the @nust/strapi didn't store it at the cookie storage. I didn't find anything related to that at the docs. Can you help?
Hi there,
in the production env I have an issue related to the authorization.
After the login, cookie are set correctly, but after a login or a relod, the response header has a Set-Cookie
with jwt
key empty.
The app is served with Nginx under proxy. This is the configuration (https://nuxtjs.org/faq/nginx-proxy/)
server {
listen 80; # the port nginx is listening on
server_name your-domain; # setup your domain here
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
location / {
expires $expires;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000; # set the address of the Node.js instance here
}
...
}
The app is served with https
.
And there is no particular configuration in nuxt.config.js
file.
Any suggestion?
Thanks in advance
After installed your module, i had got a fatal error "Cannot read property 'get' of undefined" with getToken method in .nuxt/strapi.js line 148 on all pages.
getToken () { return this.$cookies.get(TOKEN_KEY) }
I don't understand why do you retrieve token in constructor because to register we don't need a jwt-token.
@nuxtjs/strapi: 0.1.7
nuxt: 2.14.6
Hi, I have a project with Auth0 as an auth provider. The redirect/callback works fine, the jwt
is added as a cookie and everything. On the Login page, I can display the $strapi.user
info.
The problem happens when I need to use the middleware:
I have two middlwwares:
auth.js
)authenticated.js
)I'm doing this because I have some public pages, like forgot-password
and register
, for example, that I don't want that someone that is already logged in can see.
The problem is:
After I pass the login flow, starts a war between that two middleware:
I know that the $strapi
exists (and is not null) because I can see all the info on the login page. But what's happening with one telling me that the $strapi
exists and another telling me otherwise?
Just to understand: the local (username/password) flow works flawlessly.
I run Strapi on Digital Ocean droplet with 1-click setup. Everything's left as default, just made the 'products' collection for testing purposes. File upload works on UI.
I get Error 500, "Internal server error" 😞
Command works absolutely perfect if thumbnail is null. (thumbnail is not required)
Took a look at the logs, server says: error error: invalid input syntax for integer: "[object Object]"
P.S: Spoke with Strapi guys, told me it might be a module issue. (not a code issue, not a Strapi issue.
@nuxtjs/strapi: v0.1.7
nuxt: v2.14.6
Install and add strapi module to Nuxt.
Create a plugin file
// plugins/strapi.js
export default ({ $strapi }) => {
$strapi.hook('userUpdated', async () => {
console.log('%%%%%%%%%% userUpdated %%%%%%%%%')
})
}
Same issue with the
error
hook.
yarn dev
Print %%%%%%%%%% userUpdated %%%%%%%%%
in console on reload (because de fetchUser)
Is not calling the hook handler
-- Could be a bug with hookable
Hello,
with strapi 3.1.4
and a postgress database
I'm not able to update users/me
I added users as a entity within nuxt config
strapi: {
entities: ['users'],
},
then i want to change a single field called 'accounttype'
const form = {accounttype:2}
const user = await this.$strapi.$users.update('me', form)
Then i got this error:
] error error: invalid input syntax for type integer: "me"
at Parser.parseErrorMessage (/Applications/projects/testapp/backend/node_modules/pg-protocol/dist/parser.js:278:15)
at Parser.handlePacket (/Applications/projects/testapp/backend/node_modules/pg-protocol/dist/parser.js:126:29)
at Parser.parse (/Applications/projects/testapp/backend/node_modules/pg-protocol/dist/parser.js:39:38)
at Socket.<anonymous> (/Applications/projects/testapp/backend/node_modules/pg-protocol/dist/index.js:8:42)
at Socket.emit (events.js:315:20)
at Socket.EventEmitter.emit (domain.js:483:12)
at addChunk (_stream_readable.js:295:12)
at readableAddChunk (_stream_readable.js:271:9)
at Socket.Readable.push (_stream_readable.js:212:10)
at TCP.onStreamRead (internal/stream_base_commons.js:186:23)
From previous event:
at Client_PG._query (/Applications/projects/testapp/backend/node_modules/knex/lib/dialects/postgres/index.js:234:12)
at Client_PG.query (/Applications/projects/testapp/backend/node_modules/knex/lib/client.js:158:17)
at Runner.query (/Applications/projects/testapp/backend/node_modules/knex/lib/runner.js:135:36)
at /Applications/projects/testapp/backend/node_modules/knex/lib/runner.js:39:23
From previous event:
at Runner.run (/Applications/projects/testapp/backend/node_modules/knex/lib/runner.js:25:16)
at Builder.Target.then (/Applications/projects/testapp/backend/node_modules/knex/lib/interface.js:14:43)
at processImmediate (internal/timers.js:456:21)
[2020-11-19T12:54:53.055Z] debug PUT /users/me (61 ms) 500
I believe that it is necessary to cover the available functionality with tests. Need to start by creating a Fixture and a standard e2e test and add unit tests.
I want to help with this task and start by writing a base for future tests
@nuxtjs/strapi: v0.1.9
nuxt: v2.14.12
#87 has introduced a change that stores the JWT token in both a cookie and localstorage.
This has made it impossible to have a user's authentication expire at the end of the browser session, because it gets read back from localstorage even if the cookie has expired or been cleared.
Previously I was setting the cookie like this, allowing me to have a configurable remember me option:
const cookieParams: any = {
secure: true,
}
if (this.rememberMe) {
cookieParams.maxAge = 31536000 // 1 Year
}
// Manually set token so we can adjust params
this.$strapi.$http.setToken(response.jwt, 'Bearer')
this.$strapi.$cookies.set('strapi_jwt', response.jwt, cookieParams)
Localstorage should be opt-in, and better access to cookie params in this.$strapi.setToken
per #85 and #70 would be good too.
At the moment the JWT cookie is stored in the session, which means the users have to re-login everytime they open their browser.
It could be useful to allow to store the JWT cookie for a longer period of time.
Add an option to the module to set the expiration of the JWT cookie.
What do you think?
I wanted to use this module with nuxt, typescript and vue composition api but there are no type declarations for it, so I started writing my own, But still there is an error telling me that there is no $strapi on context when I want to use $strapi in a middleware.
The exact error:
{
"resource": "/project/middleware/auth.ts",
"owner": "typescript",
"code": "2339",
"severity": 8,
"message": "Property '$strapi' does not exist on type 'Context'.",
"source": "ts",
"startLineNumber": 4,
"startColumn": 29,
"endLineNumber": 4,
"endColumn": 36
}
I want to be able to use this module in a nuxt-typescript project without errors.
I think rewriting the module in typescript or just providing @types folder would fix the issue.
I myself would be interested in helping.
import { Middleware } from '@nuxt/types'
const auth: Middleware = ({ $strapi, redirect, route }) => {
if (!$strapi.user) {
return redirect(`/login?next=${route.path}`)
}
}
export default auth
I'd like to get all results from a query rather than the default pagination of 100 results.
At the moment, my query looks like:
await this.$strapi.find('locations')
I've tried to integration a searchParam like:
await this.$strapi.find('locations', { limit: '-1' })
But that failed. What is the recommended way of getting all results using this module?
Logging in is taking a long time, and I realize it's because the user object has contained within it all the content entries that user has made. I don't need them here.
Where is this set? Perhaps a toggle somewhere to exclude (or include) the user's authored content? Or perhaps this is something that can be set within Strapi. Heading over there to check...
When i use, all fine
async login() { this.error = null; try { await this.$strapi.login({ identifier: this.email, password: this.password, }); this.$store.commit("SET_USER", this.$strapi.user); this.$router.push("/"); } catch (e) { this.error = e.response.data.message[0].messages[0].message; } },
But when I reload the page or use the user updateMe method, the user state is updated to the first ID 1
async gameUpdate() { this.error = null; if(this.playGame.length >= 35) { this.playGame = this.playGame.substring(0,35); } try { let query = await this.$strapi.$users.update("me", { fav_game: this.playGame, }); this.$store.commit("SET_USER", query); this.edited = false; } catch (e) { this.error = "Error"; } },
that is, the user data with the first ID is transferred to the payload
Hello!
I am running a Nuxt project with Strapi backend, and am updating it to work with this new module. However, I am having issues managing the authentication flow.
Logging in and navigating the app works fine, but since Nuxt is rendered server side, if I refresh the page the data stored in $strapi.user
is lost.
Is there a correct way to implement this module to avoid this happening? Previous to using this module, I used a VueX store and cookies, and then used nuxtServerInit()
to fetch the data from the Cookie and commit it to the user. WOndering if there is a way to avoid doing this.
To log in to my site I've moved from an auth recipe to using the Nuxt strapi-module. After a refresh the cookie is still there but I am effectively logged out and get the following 2 console messages:
Cookie “strapi_jwt” has been rejected because it is already expired.
Cookie “strapi_jwt” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite
Now with v0.3 I've made some changes to the cookie setting:
expires: 365d
sameSite: Lax
secure: true
httpOnly: false
But nothing helps...
I notice that localStorage gets an item with a key of strapi_jwt. Its value contains "token" as a long hash, then "expires" as a date that looks like the moment of logging in and therefore already in the past. Is it this localStorage item that is effectively logging me out?
Anybody got any idea what I'm missing here?
After reloading the page, some properties disappear from the user object, I don't understand what could be the reason
i will show a json from vue dev-tools
i added 3:
articles - relation
avatar - media
fav_game - text
1: after user login on profile page
user:Object
articles:Array[2]
avatar:Object
blocked:null
confirmed:true
created_at:"2021-02-03T13:58:32.000Z"
email:"[email protected]"
fav_game:"World of Warcraft"
id:1
provider:"local"
role:Object
updated_at:"2021-02-05T04:32:06.000Z"
username:"ERL"
2: after page reload
user:Object
blocked:null
confirmed:true
created_at:"2021-02-03T13:58:32.000Z"
email:"[email protected]"
fav_game:"World of Warcraft"
id:1
provider:"local"
role:Object
updated_at:"2021-02-05T04:32:06.000Z"
username:"ERL"
@nuxtjs/strapi: v0.1.0
nuxt: v2.13.0
https://github.com/nuxt-community/strapi-module/blob/master/lib/plugin.js#L88
this.$strapi.user
this.$strapi.login()
methodthis.$strapi.user
this.$strapi.login()
methodIn the library, you using fetchUser method, what calling this.getEntry('users', 'me')
but it's not a function.
Code goes to catch block and calling this.clearToken()
@nuxtjs/strapi: v0.1.6
nuxt: v2.14.5
I have a docker-compose with nuxt
and strapi
, on the top a reverse proxy that handle routing using Virtual hosts that use http://my.project.test
for nuxt and http://api.my.project.test
for strapi.
If I call on the client http://api.my.project.test
everything is going ok.
If I made the same call on the server tries to connect to the 80
port instead of 1337
FetchError: request to http://api.my.project.test/users/me failed, reason: connect ECONNREFUSED xxx.xx.xx.xx:80
If into server I call to http://strapi:1337
everything is going ok, but the client is broken.
I read this is a common problem with docker, nuxt and strapi (you can look also at this: https://stackoverflow.com/a/55090981)
So debugging the source I checked the http-module
. It should give you the opportunity to set both client and server url, but strapi-module
set a unique url and with this line (https://github.com/nuxt-community/strapi-module/blob/c65a31cd5518f3387855a741a1dac7618958c93e/lib/plugin.js#L19) it override http-module settings.
I expect to use the nuxt http: {}
config (https://http.nuxtjs.org/api/#baseurl & https://http.nuxtjs.org/api/#browserbaseurl) or strapi module could proxy these settings.
In server mode, fetchUser is going to fail.
Hello,
is there a way to call the findOne-method with other parameters than the id, for example with a slug?
In module-documentation https://strapi.nuxtjs.org/strapi#findoneentity-id is the findOne just with a fixed id.
In strapi-documentation is the findOne-call also with an object possible (https://strapi.io/documentation/developer-docs/latest/concepts/queries.html#api-reference).
That would be a great feature.
Thanks for some help with this!
Best regards,
Timo
I'm using Nuxt + Strapi on a medium-sized web application(I haven't used this module in any real project yet, but willing to). The issue I currently face is most of the time I'm using REST, but for some parts of the app a GraphQL query will do the job better(multiples queries in just 1 HTTP request for example), but making fetch/axios request to a GraphQL API without Apollo seems to require a lot of boilerplate.
I would love to have a method to perform graphql queries like:
const data = await $strapi.graphql(query, vars);
const request = await this.$strapi.$http.$post('/graphql', {query, vars});
const {data} = await request.json();
The alternative seems a little bit verbose?
Let me know what do you guys think, If you think this feature is good to have I could help with a PR.
@nuxtjs/strapi: v0.3.0
nuxt: 2.14.12
When following the example EXACTLY as shown here with @nuxtjs/strapi tutorial here:
https://strapi.io/documentation/developer-docs/latest/getting-started/nuxt-js.html
The example worked perfectly with Axios and Fetch.
Follow the above tutorial in a brand new Nuxt and Strapi install.
Return the results from the rest API endpoint for the restaurants collection
Returns an error: "TypeError: Cannot read property 'find' of undefined"
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
@nuxtjs/strapi:
nuxt:
I'm building a site based on a tutorial on strapi.io. I use nuxtjs/strapi for authentication. Everything went well, but there is a problem:
The find(entity, params)
only shows the basics.
How to use all the parameters here? Can you provide more examples?
Hi,
I've been working for some days on a project and it basically does a couple things right now:
It was all working great, but since yesterday I get a 403 Forbidden
message. I tought about auth not working well, but I get this trace from Strapi:
[2020-11-06T10:23:40.208Z] debug OPTIONS /auth/local (0 ms) 204
[2020-11-06T10:23:40.641Z] debug POST /auth/local (422 ms) 200
[2020-11-06T10:23:40.660Z] debug OPTIONS /users/me (1 ms) 204
[2020-11-06T10:23:40.715Z] debug GET /users/me (49 ms) 200
[2020-11-06T10:23:42.885Z] debug GET /devices (15 ms) 403
[2020-11-06T10:23:42.892Z] debug GET /devices/count (19 ms) 403
[2020-11-06T10:23:42.907Z] debug GET /devices?_limit=10&_start=0 (12 ms) 403
it seems auth is working but then I get a 403 forbidden when calling the devices
endpoints. Same queries using Postman work just well:
[2020-11-06T10:29:48.071Z] debug POST /auth/local (103 ms) 200
[2020-11-06T10:29:51.901Z] debug GET /devices (41 ms) 200
[2020-11-06T10:29:55.013Z] debug GET /devices/count (26 ms) 200
[2020-11-06T10:30:00.022Z] debug GET /devices?_limit=10&_start=0 (35 ms) 200
I also tried using anonymous chrome window, in case something was getting catched, but I got exactly the same.
I've implemented auth using auth
Nuxt module, following this tutorial: https://strapi.io/blog/strapi-authentication-in-nuxt-js
Any ideas on what can be happening?
Thanks!
@nuxtjs/strapi: ^0.1.6
nuxt: ^2.14.0
Hey guys, hi there!
The problem persists, but in another way.
And maybe i'm not doing something well.
The problem is next.
When i'm logging in, i have the next response for my $strapi.user:
U can see the structure that have user object.
Expected that after a page refresh, the user structure remains the same.
After a page refresh i get this structure using $strapi.user:
As u can see, there are some missing properties.
I hope u can help me with this one.
Thank you in advance <3
Hello. I need to translate error messages from response. How can I do it? Is it possible to get id from error? https://github.com/kbariotis/strapi/blob/master/packages/strapi-plugin-users-permissions/controllers/Auth.js#L402-L410
Is there a way to cache get requests like axios-extensions?
@nuxtjs/strapi:
v0.1.1
nuxt:
ex: v2.13.0
For some reason, when updating an object in Strapi with a protected route, the authorization header not present in the request object. I can fix it manually set the header before the request.
How to use this.$strapi.user in vuex store?
context.$strapi.user not working
@nuxtjs/strapi: 0.3.0
nuxt: 2.14.12
Open a Nuxt-Strapi app in IE/Edge in either Development or Production mode.
For polyfills to kick in.
The app breaks completely and the only thing that's working is navigation.
Console shows an error that 0: Expected identifier, string or number
The issues happens here on line 22:
Is the Strapi module supported on older browsers? This is crucial for my current project.
For production it shows the same but the script's minified.
Hi, is it possible to import queries instead of write them directly into the HTTP request? something like:
import productsQuery from '~/queries/products.gql'
async asyncData({ $strapi }) {
const products = await $strapi.graphql({ query: productsQuery })
return { products }
}
instead of the documented method:
async asyncData({ $strapi }) {
await $strapi.graphql({
query: `
query {
products {
...
}
}
`
});
}
In my case I'm getting HTTPError processTicksAndRejections
Is it possible to?
I just need to send data from the contact form on the site to the administrative email. I don't want to create a separate service for this, especially since Strapy has his own solution. But I don't understand how to use it directly from the frontend.
As far as I can see, we do not have access to $strapi.plugins['email']... I can only create a collection like Messages. Then submit the new post to the collection from the contact form. And on the Strapi side create a trigger (idk how) for sending a letter when a new post created in this collection?
Am I thinking right? Maybe there is some simpler solution or a ready-made example of such an approach?
after following the setup
i got this error Cannot read property 'create' of undefined
until i moved @nuxtjs/strapi from modules to buildModules in nuxt.config.js
How do I use the proxy module with this module ? Do I need to manually set my STRAPI_URL env to the same as the nuxt project? this seems highly unconvienient. Is there a way for this module to expose the $http modules proxy and prefix options ?
Thanks! Love the module btw
I'm developing an application without SRR and it's frustrating that every time the page is restarted I have to log in again
Use localStorage and nuxtClientInit module
How do I use STRAPI_URL ? I have tried the following:
File .env
:
STRAPI_URL="http://localhost:1337"
File .env.production
:
STRAPI_URL="https://my-app.herokuapp.com/"
In nuxt.config.js
I have first tried to set env property and the new runtime config:
env: {
STRAPI_URL: process.env.STRAPI_URL || 'http://localhost:1337',
},
publicRuntimeConfig: {
STRAPI_URL: process.env.STRAPI_URL,
},
Then I have also tried the url option:
strapi: {
url: process.env.STRAPI_URL || 'http://localhost:1337',
},
It doesn't work, $strapi
is always doing calls to localhost:1337.
@nuxtjs/strapi: v0.1.6
nuxtjs: v2.14.0
We created an empty nuxt project and we added @nuxtjs/strapi package.
Added also the necessary config to nuxt.config.js like...
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
// Doc: https://strapi.nuxtjs.org/
'@nuxtjs/strapi',
// 'nuxt-polyfill'
],
strapi: {
url: '<dataEnpointURL>',
entities: ['categories', 'products']
},
inside .vue files:
this.$strapi.find('products')
and run dev mode or prod to an ie11.
To work properly
Console Error: SCRIPT1005: Expected '('
and cannot get any data or rendering issues are occurred because the data are used
into components as params.
Hi,
I'm deploying an Strapi backend and a NuxtJS app (SPA) using the strapi module to fetch data. Both services are served over Traefik through HTTPS.
Login seems to work fine, but then I see messages in the browser console showing this:
Mixed Content: The page at 'https://mydomain/' was loaded over HTTPS, but requested an insecure resource 'http://mydomain/devices/stats/status'. This request has been blocked; the content must be served over HTTPS
I've reviewed urls, but all are set using https. I'm making use of $strapi methods and $strapi.$http. Looking around, I've seen in the HTTP module the https options is set to false by default so I guess this module is sending http request instead of https ones.
Could that be the problem? Is there any way of pass the https: true
option to the http module?
Thanks!
@nuxtjs/strapi: v0.1.6
nuxt: v2.14.0
I don't have one yet
I have the following pages/routes in my setup:
login/index.vue
- to log the user in
dashboard/index.vue
- which can only be seen by logged-in users
register/onboarding.vue
- which should be redirected to, if the registration process is incomplete
I have configured middleware/auth.js
as follows to force the user to complete the registration process if registrationComplete
is false
:
export default function ({ redirect, $strapi }) {
// default condition (example from https://strapi.nuxtjs.org/usage)
if (!$strapi.user) {
return redirect('/login')
}
// DEBUG
console.log('$strapi.user.registrationComplete', $strapi.user.registrationComplete)
// custom condition
if (!$strapi.user.registrationComplete) {
return redirect('/register/onboarding')
}
}
Then I use middleware: 'auth'
on the dashboard/index.vue
and register/onboarding.vue
page.
I expect to be redirected to the onboarding page if the users flag registrationComplete
is false
I get an error from the browser: A webpage is slowing down your browser what would you like to do? Stop/Wait
Inside the browser console I can see from the debug line above that console.log('$strapi.user.registrationComplete', $strapi.user.registrationComplete)
gets into an endless loop and is executed thousands of times!
If I remove my custom condition inside auth.js
, it gets out of the endless loop. What is happening here?
Hi. Are there any limits or restrictions to this.$strapi.user use? It must return user details - and it almost works. Returns any field, except relational fields and media.
Upon pushing to a staging server I get an issue that I did not get at localhost. The cookie saved gives me the following console warning:
Cookie “strapi_jwt” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite
How to change the value of SameSite in the cookie?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.