segunemma2003 posted a new question
adonuxt-template •
When i refresh my page on production, it shows me errors
fre2mansur posted a new question
adonuxt-template •
Hello,
I have created a plugin in the plugin folder paginate.js
export default (context, inject) => {
const paginate = ( totalItems,
currentPage = 1,
pageSize = 10,
maxPages = 10) => {
return "something";
}
inject('pagiante', paginate)
context.$paginate = paginate
}
I imported in nuxt-config.js
plugins: [
'@/plugins/paginate.js'
]
In my component
async asyncData({$axios, $auth, $paginate}) {
console.log($pagiante(20)) --------------------------> its working fine
},
methods: {
async search() {
console.log(this.$paginate(10)) -----------------------> not working (TypeError: _this.paginate is not a function)
}
}
what I am missing here?
jas777 posted a new bug report
adonuxt-template •
Sign in with GitHub
Remove cookies
Refresh
The page should not refresh
It's stuck in an endless refresh loop
(auth-next in case cmty changes the version)
VoKhuong posted a new bug report
adonuxt-template •
In my store, i've declared getters like this :
export const getters = {
foo(state) {
return (range) => {
const result = Object.assign({}, state.bar)
result[range].push('test') // raise an error
return result
}
}
When I call it in my component, I get a Vuex error : [vuex] do not mutate vuex store state outside mutation handlers
It only occurs when I'm mutating the array, if instead of doing a push i assign that property to a value (for example an integer):
result[range] = 1
It doesn't raise any error. Also, I can output the result of that getter without any problem, the array end with 'test' and the original array is not modified.
Nothing, it shouldn't raise any error when I modify an array of a copy of an Object.
An error is raised when I add an element to an array of a copy of an Object.
uqcire posted a new question
adonuxt-template •
Can anyone please provide help out with a full solution of using custom scss variables in nuxt-element?
Lee-hyuna posted a new question
adonuxt-template •
Why is ERR_REDIRECT thrown here?
tol64 posted a new question
adonuxt-template •
Please help me solve this task.
A series of lessons based on the material: https://youtu.be/KFgi3IqavK4
Windows 10 operating system
Path to the project: C:\laragon\www\larastart-project
There are two folders in this directory:
The first (backend) is the Laravel framework.
The second (frontend) is the Nuxt framework.
Contents of the file auto.larastart-project.test.conf
server {
listen 8080;
listen 8443 ssl;
server_name larastart-project.test *.larastart-project.test;
root "C:/laragon/www/larastart-project/";
index index.html index.htm index.php;
location / {
proxy_buffers 16 4k;
proxy_buffer_size 2k;
# npm run dev
proxy_pass http://localhost:3000;
# try_files $uri $uri/ /index.php$is_args$args;
# autoindex on;
}
location /api {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
# php artisan serve
proxy_pass http://localhost:8000/api;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass php_upstream;
#fastcgi_pass unix:/run/php/php7.0-fpm.sock;
}
# Enable SSL
ssl_certificate "C:/laragon/etc/ssl/laragon.crt";
ssl_certificate_key "C:/laragon/etc/ssl/laragon.key";
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
ssl_prefer_server_ciphers on;
charset utf-8;
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
location ~ /\.ht {
deny all;
}
}
Dependencies in composer.json. The package Sanctum is used for authentication: https://laravel.com/docs/7.x/sanctum#spa-authentication
"require": {
"php": "^7.2.5",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^6.3",
"intervention/image": "^2.5",
"laravel/framework": "^7.0",
"laravel/sanctum": "^2.4",
"laravel/tinker": "^2.0",
"spatie/laravel-medialibrary": "8.0.0"
},
"require-dev": {
"barryvdh/laravel-ide-helper": "^2.7",
"facade/ignition": "^2.0",
"fzaninotto/faker": "^1.9.1",
"laravel/ui": "^2.0",
"mockery/mockery": "^1.3.1",
"nunomaduro/collision": "^4.1",
"phpunit/phpunit": "^8.5"
},
APP_URL=http://localhost
CORS_ALLOWED_ORIGIN=http://localhost:3000
SANCTUM_STATEFUL_DOMAINS=http://localhost:8000
SESSION_DRIVER=file
SESSION_DOMAIN=localhost
return [
'paths' => [
'api/*',
'login',
'logout',
'user',
'sanctum/csrf-cookie',
],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
];
...
protected $middlewareGroups = [
...
'api' => [
EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
];
...
Dependencies in package.json
"dependencies": {
"@nuxtjs/auth": "^4.9.1",
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/proxy": "^2.0.0",
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.15.0",
"cookie-universal-nuxt": "^2.1.4",
"iview": "^3.1.5",
"jquery": "^3.5.1",
"moment": "^2.27.0",
"nuxt": "^2.0.0",
"popper.js": "^1.16.1",
"prismjs": "^1.20.0"
},
"devDependencies": {
"node-sass": "^4.14.1",
"nuxt-purgecss": "^1.0.0",
"sass-loader": "^8.0.2"
}
API_URL=http://localhost:8000/api
API_DOMAIN=http://localhost:8000
The settings related to authentication are shown.
...
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth',
'@nuxtjs/proxy',
'@nuxtjs/dotenv',
'bootstrap-vue/nuxt',
[
'cookie-universal-nuxt', {
alias: 'cookie'
}
],
],
auth: {
strategies: {
local: {
endpoints: {
login: {
url: process.env.API_DOMAIN + '/login',
method: 'post'
},
logout: {
url: process.env.API_DOMAIN + '/logout',
method: 'post'
},
user: {
url: process.env.API_DOMAIN + '/user',
method: 'get',
propertyName: false
}
},
tokenRequired: false,
tokenType: false
}
}
},
axios: {
baseURL: process.env.API_DOMAIN,
credentials: true
},
...
Check the token request in the program Postman: https://www.postman.com/.
You can see that the data is being released.
Then we make a page with a test form: pages\auth\signin.vue
Method code:
methods: {
async login() {
try {
await this.$axios.$get('http://localhost:8000/sanctum/csrf-cookie');
await this.$auth.loginWith('local', {
email: this.form.email,
password: this.form.password,
});
this.$router.replace('/');
}
catch (e) {
this.errors = 'Could not sign you with these credentials.';
console.log(e);
}
}
}
Result:
More:
There is no XSRF-TOKEN on the Application tab. It seems to be here also when sending the form data.
Try to play it at your place. Can you tell me what's missing, please?
Haotian9850 posted a new question
adonuxt-template •
Hi there, we are using auth0 in our nuxt project with the nuxt/auth module. One problem we have so consistently experienced: the expiration of our client-side bearer token seems too soon - we have set both the application-level (ID Token Expiration
, Refresh Token Lifetime (Absolute)
) and tenant-level (Inactivity timeout
, Require log in after
) to some very large values (i.e. a couple days), but the client-side stored Bearer token still seems to expire even after a few hours since it is issued (and incidentally our application recieves a 401
when .fetchUser()
is called i.e. querying the /userinfo
endpoint on our auth0 tenant), and the user is forced to log in again (even just after a couple hours since last log in).
Here is our whole authentication flow (runs when our application is loaded everytime):
if(!this.$auth.loggedIn){
// a token stored means user has not manually logged out, so he needs to be authenticated automatically
if(this.$auth.getToken("auth0")){
try{
await this.$auth.fetchUser();
if(this.$auth.loggedIn){
console.log("Authentication successful!");
}else{
console.log("Authentication failed...")
}
}catch(err){
console.log("Authentication error...")
}
}else{
console.log("No token found, not authenticating...");
}
}else{
console.log("Already authenticated!");
}else{
# no token available on client-side => do nothing
}
And in our nuxt.config.js
:
auth: {
redirect: {
login: "/",
logout: "/",
callback: "/",
home: "/"
},
strategies: {
auth0: {
domain: "OUR_TENANT.auth0.com",
client_id: "OUR_CLIENT_ID",
audience: "https://OUR_TENANT.auth0.com/api/v2/"
}
}
},
Having users log in every time our application is loaded significantly hinders user experience - Is there any setting / configuration we are missing here? Any help / suggestion is appreciated! Thanks!
AllanOricil posted a new question
adonuxt-template •
a
elviskudo posted a new question
adonuxt-template •
Hi,
Wooww, youre so great, to merge adonisjs with vuejs like this, i love it
Now, my api runs great
I'll try to implement AdminLTE to your great app
Can you give me detail step to do this?
Thanks
Sjoerrdd posted a new question
adonuxt-template •
What?
Why is this deprecated?
What can I use instead of this?
I love Adonuxt <3
axlyody posted a new question
adonuxt-template •
It's possible to append nuxt.render() with meta tags CSRF using Promise?
hkmsadek posted a new question
adonuxt-template •
I am getting this error with this version.
RangeError
Maximum call stack size exceeded
App is not loading and there is nothing much in the app. Only one asyncData call.
vintprox posted a new question
adonuxt-template •
I'm not sure if it's intended behavior, but when I run production build, CSS contents (<style data-vue-ssr-id="a473c1a4:0 17cfdfa9:0 40238fea:0">...</style>
) are appended to <head>
- no matter what this section of Nuxt Guide tells us.
I expected that global CSS being injected into final file like styles.css
, so that it could be just referred on any page (automatically) and everybody would benefit from caching.
$ npm i -D tailwindcss
config/nuxt.js
<...>
module.exports = {
<...>
/*
** Global CSS
*/
css: [
{ src: '~assets/sass/app.sass', lang: 'sass' }
],
<...>
build: {
postcss: {
plugins: {
'tailwindcss': {}
}
}
}
}
resources/sass/app.sass
@tailwind preflight
@tailwind components
@tailwind utilities
Tailwind CSS was compiled succesfully for my surprise, that let me see it in action with Adonuxt. Unfortunately injecting same stuff for every page makes production build bloated. Can we fix this?
padinko posted a new bug report
adonuxt-template •
npm install normalize.css
@import "~normalize.css";
it compiles less file and it will include normalize.css
Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 15:08:14
Error: Can't resolve '~normalize.css' in 'C:\web\work\zeo-adonuxt\resources\assets\less'
Hello,
in less-loader there is native alias ~ for importing npm modules, but in adonuxt it's imposibble.
there is problem probably with your alias, which is the same as less-loader alias ~
padinko posted a new question
adonuxt-template •
Hello,
in less-loader there is native alias ~
for importing npm modules, but in adonuxt it's imposibble:
@import "~normalize.css";
Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 15:08:14
Error: Can't resolve '~normalize.css' in 'C:\web\work\zeo-adonuxt\resources\assets\less'
there is problem probably with your alias, which is the same as less-loader alias ~
Geowan posted a new question
adonuxt-template •
Am trying to use the adonis Env use in my resources plugins but this fails
I have created a vuescoketio plugin in the resources/plugins
import Vue from 'vue'
import store from '../store'
import VueSocketIO from 'vue-socket.io'
const Env = use('Env');
Vue.use(new VueSocketIO({
debug: true,
connection: Env.get('SOCKET_URL', 'https://localhost:5389'),
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_'
},
}))
But the above always throws an error
ReferenceError: use is not defined
Which i believe is from const Env = use('Env')
How can i use the ENV as specified on the adonis documentation at https://adonisjs.com/docs/4.0/configuration-and-env
kudapara posted a new question
adonuxt-template •
Hi
I am trying to access the documentation for adonuxt but the website https://ado.nuxtjs.org is saying not found. Could this be a bug?
Tinostarn posted a new question
adonuxt-template •
Hello,
Just upgraded Nuxt from 1.4.1 to 2.3.4
Cannot set property 'render' of undefined
Is there anything related to Webpack 4 that need to be updated in the original Adonuxt template ?
Help appreciated :)
raultrysw posted a new question
adonuxt-template •
I was trying to upload an image file to the public path but, using Helpers.publicPath, I get the file onto the public directory instead of in the resources/public directory
How can I change the publicPath?