I have setup a Laravel(8.83.23) with Jetstream(2.7.5) and Inertia laravel(0.3.6)
Im using Vuejs(2.7.3) with vue-router(3.6.4) and it seem inertia-vue(0.5.12)
Everything work fine except for the component that should be shown after a successful login which is my dashboard. I have setup vue-router to use /app/ as a base .
When I log in, the redirection to /app/dashboard work fine but my Dashboard.vue Page is not shown. If i access directly the url it work, any router-link to it work too. Accessing /login AFTER being logged work as it redirect correctly and the page is shown. The only time the page is not shown is when I'm authenticating. Any other component are shown (like a nav that show only when logged in)
After investigating $route.path, it seem to stuck for an unknown reason to /login.
This happen only when I do a successful login attempts.
I don't know where to look next to try to fix this. I'm suspecting something within the <router-view></router-view> as other component outside of it works well but how can I address this very specific situation?
EDIT:
Here is the code of the App.vue
<template>
<app-layout>
<v-row>
<v-col class="pa-0 mb-3">
<v-toolbar elevation="1" dense>
<v-toolbar-title>App</v-toolbar-title>
<template v-slot:extension>
<v-tabs show-arrows :hide-slider="!inAppLinks">
<v-tab v-for="link in appLinks" :to="link"
>Go to {{ link }}</v-tab
>
</v-tabs>
</template>
</v-toolbar>
</v-col>
</v-row>
<router-view></router-view>
</app-layout>
</template>
And the code of route.js:
paths : [
{ path:'/dashboard', component:Dashboard },
{ path:'/foo', component: Sample },
{ path:'/bar', component: Sample },
{ path:'/faz', component: Sample },
{ path:'/baz', component: Sample },
{ path:'/login', redirect: '/dashboard' }
]
vue-router use a /app/ as base url. As I don't have /app/login, making a redirect from /app/login to /app/dashboard work, but this does not solve the problem
I've setup a demo at demo.concept-net.net
You can login with demo#concept-net.net and password demodemo
The demo doesn't have the redirect
As I don't get an answer, and I didn't find a better solution, I'm gonna stick to the redirect for now as it kinda work.
So what I did was a redirect from /login to /dashboard inside vue-router as the login is not managed there it seem to cause no issues(all related things to vue-router use /app/ as a base URL and the login is manage by jetstream on root url).
Related
I am using Laravel 5.8 and Vue 2.6 and trying to use a relative path for an image file in my single file component. I have reviewed the suggestions in How to import and use image in a Vue single file component?
but cannot get it to work.
When trying:
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
I get this:
This relative module was not found:
* ./assets/logo.png in ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib?
?vue-loader-options!./resources/js/components/xxxx.vue?vue&type=template&id=abd0e146&scoped=true&
When I try:
<template>
<div id="app">
<img :src="image" />
</div>
</template>
<script>
import image from "./assets/logo.png"
export default {
data: function () {
return {
image: image
}
}
}
</script>
<style lang="scss">
</style>
I get:
This relative module was not found:
* ./assets/logo.png in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js /components/xxxx.vue?vue&type=script&lang=js&
Am I missing something with webpack-mix or vue-loader?
Edit:
Using simple static reference (src="/assets/logo.png") works on local development server, but doesn't on production server.
I've seen numerous suggested solutions for this basic image file referencing, but puzzled that there are so many possibilities and not a single best practice. Again, hoping to find a Best Practice when using Laravel/Laravel Mix/Vue and SFC that works in development and production.
There are 2 ways of using an image in your setup:
Bundled with webpack
<img src="./assets/logo.png">
import image from "./assets/logo.png"
These bundle the image using webpack, and using this solution you get the benefits of:
Automatic inlinening with base64 for small images
Automatic "deep" compressing with any webpack loaders
Path works from every path in your app
Compile time checking if the file exists
Using your own webserver
const image = '/assets/logo.png'
const image = 'http://example.com/’
In these solutions, you need to setup your webserver yourself to serve those resources (or put them in the public directory)
Easy changing to a different image without rebuilding the front end
More flexible
The answer to this is that the wrong deployment for the production server was being used that tried pointing to the 'public' folder instead of locating the public files on public_html.
After deploying according to this post, of course relative paths work exactly the same on development and production servers.
The only difference is in Step 5 for Laravel 5.8 in the server.php file,
Change
if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
return false;
}
To
if ($uri !== '/' && file_exists(__DIR__.'/public_html'.$uri)) {
return false;
}
Relative paths like
<img src="img/logo.png">
on either server work the same.
It's unfortunate that Laravel docs don't go into more detail on this method of deployment since I suspect there are numerous developers wanting to deploy on shared servers at least for testing purposes.
Use
<img src="#/assets/logo.png">
This will use webpack and created a hashed version of your logo.png.
Or in JS use:
:src="require('#/assets/logo.png');
Provided that your image is stored in public folder and is accessible, you can link to it by absolute path just fine instead of using a relative path ./
<template>
<div id="app">
<img src="/public/img/widgets/logo.png" />
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
</style>
Given you have this structure
Hope this helps
I have removed public from my Laravel project url. But now my Vue.js is not working.
If I remove public from src file it's not recognizing that project has Vue.js, but if I add public it's recognizing that this project has Vue.js. But it's not showing that component on my Blade page, instead of it it's giving me this error:
[Vue warn]: Unknown custom element: <app-some> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
My Blade file:
<div id="app">
<app-some> </app-some>
</div>
<script src="{{asset('public/js/app.js')}}"></script>
app.js file:
Vue.component('appSome', require('./components/some.vue').default);
"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
It occurs when components are not registered within the "app.js" file. In the Vue instance, try adding this
new Vue({
components: {
appSome: some
}
});
Of course you also have to import the component.
I am relatively new to Vue and started to build an SPA with Authentication and the Laravel Framework in the background. To achieve that I followed this tutorial:
https://codeburst.io/api-authentication-in-laravel-vue-spa-using-jwt-auth-d8251b3632e0
The auth is working perfectly fine. But what bugs my now is that routes/components which are protected with auth are also bundled in my app.js and are fully readable for everyone who is able to use the dev console.
Example
These are my routes:
export default new VueRouter({
routes: [
{
path: '/',
redirect: '/login',
},
{
path: '/login',
name: 'login',
component: AuthLogin,
meta: {
auth: false
},
},
{
path: '/order',
name: 'order',
component: OrderPage,
meta: {
auth: true
},
},
]
});
So /order and the corresponding component OrderPage ist protected by auth.
OrderPage:
<template>
<div>
Order Page
</div>
</template>
However the component OrderPage is readable in app.js in public directory. I can just search for the content "Order Page" and read it which is in my opinion not the goal of auth.
Is there a way to "isolate" the protected components and only export/bundle them when the auth is passed? Am I missing something?
Bundling based on Auth
You likely aren't bundling the javascript on the fly... You're transpiling and bundling long before the client visits your site, so no you shouldn't bundle when auth is passed. Bundling, transpiling, and minifying can be pretty resource intensive processes.
Isolation for Security
You could isolate code to a specific javascript file, there's no reason why you need to have everything bundled in the same app.js file. Laravel Mix can produce multiple bundles based on your configuration.
However, there's really no point from a security standpoint since client side code should never contain anything sensitive and all authorizations for actions should be performed on the server.
Production Readability
If you're worried about someone reading the client side code, minified javascript is incredibly hard to decipher since it's shrunk down and obfuscated. Production javascript should always be minified without source maps.
How would you go about creating a button in your templates of an app in Django. I have a script in my views.py:
def my_python_script(request):
if request.is_ajax:
# stuff here
else:
return HttpRequest(status=400)
But how do I actually turn this into a button? Is there some html or css I need to put somewhere? I saw some things about a templates directory in the application but I'm unsure on what things to put there and in what formats.
You would do like the following:
<button type='button' id="my_button">Click me</button>
And with a js (jquery):
$("#my_button").click(){
$.get("url_to_view",{data:"data",function(response){
// response to do something after the request
});
});
I am developing a laravel(5.4) application in which i am using vue js(2.0) for SPA, my problem is i want to remove #(hash) from URL.
please suggest me any solution?
This is my HTML
<ul class="category-list">
<li><router-link to="/testlink.html">Tets Link</router-link></li>
<li><router-link to="/demotestlink.html">Demo Test LInk</router-link></li>
</ul>
This is my vue js code
export default new VueRouter({
[
{
path: '/testlink.html',
component:require('./components/demo/Testlink')
}
],
mode: 'history',
});
and i have made a Testlink.vue file inside components/demo folder in Assets
Note: FYI, I am using vue.js(2.0) in Laravel(5.4) Application
From Vue-Router documentation, I found this.
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
I tried the above and it worked fine for me. For more information read here