I have a problem with vue router when I reload the page.
The link http://example.com/admin/home/page1
changes to this
http://example.com/admin/home/page1/page1 .
NB : this project is in laravel's public directory
vue version 3.9.2
os win 10 x64
router.js
const router = new Router({
mode: ‘history’,
base: process.env.VUE_APP_LINK,
routes: [
{
path: ‘/home’,
name: ‘home’,
component: Home,
children: [
{
path: ‘page1’,
name: ‘page1’,
component: () => import(’#/components/contents/page1.vue’),
},
{
path: ‘page2’,
name: ‘page2’,
component: () => import(’#/components/tools/page2.vue’),
},
{
path: ‘page3’,
name: ‘page3’,
component: () => import(’#/components/contents/page3.vue’),
},
{
path: ‘page4’,
name: ‘page4’,
component: () => import(’#/components/contents/page4.vue’),
}]},
{
path: ‘/login’,
name: ‘login’,
component: Login
},
{
path: '*',
redirect: '/home/page1'
}
]
})```
<li class="nav-item"><router-link to="page1" class="nav-link">page1</router-link></li>
<li class="nav-item"><router-link to="page2" class="nav-link">page2</router-link></li>
<li class="nav-item"><router-link to="page3" class="nav-link">page3</router-link></li>
<li class="nav-item"><router-link to="page4" class="nav-link">page4</router-link></li>
Try to use /page1 or /home/page1 instead of page1 in your path values.
Related
I am trying to send email that has to contain static image. The problem involves the way how to pass src for image. I mean for now I have to provide full path with origin like http://localhost:3000/logo.png and it works. But is this possible to provide only relative path for instance src=logo.png and it would work the same way?
Here is my hbs file:
<h2 class="header">Welcome {{ name }},</h2>
<p>Please the link click below to confirm your email address</p>
<p>
Confirm your email
</p>
<p>If you did not request this email you can safely ignore it.</p>
<br>
<footer >
<p>Best regards, <br><br> Bookify team</p>
<div class="image-container">
<img src="http://localhost:3000/logo.png" alt="Bookify logo">
</div>
</footer>
main.ts:
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');`
app.module.ts:
ServeStaticModule.forRoot({
rootPath: join(__dirname, '..', 'public'),
}),
nest-cli.json:
"compilerOptions": {
"assets": [
{
"include": "../views/**/*.hbs",
"outDir": "dist/views"
},
{
"include": "../public/**/*.{png, jpg}",
"outDir": "dist/public"
}
],
"watchAssets": true
}
Configuration for mailermodule:
export const mailerConfig: MailerAsyncOptions = {
useFactory: () =>
({
transport: {
host: process.env.SMTP_HOST,
port: process.env.SMTP_PORT,
secure: false,
auth: {
user: process.env.SMTP_AUTH_USER,
pass: process.env.SMTP_AUTH_PASSWORD,
},
},
defaults: {
from: process.env.WEBSITE_EMAIL,
},
template: {
dir: join(__dirname, '../../views'),
adapter: new HandlebarsAdapter(),
options: {
strict: true,
},
},
} as MailerOptions),
};
My component where I want to route to Laravel Notice the question in the href in the script: The idea is actually to return me from the Vue component to a Laravel view. I have realized that vue router allows me to go perfectly from one vue component to another vue component and what I need is to go from a link in a vue component to a laravel view that belongs to a web route
<template>
<div>
<v-breadcrumbs
:items="items"
divider="."
></v-breadcrumbs>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{
text: 'Dashboard',
disabled: false,
href: 'how do i add a laravel web route here?',
},
{
text: 'Link 1',
disabled: false,
href: 'breadcrumbs_link_1',
},
{
text: 'Link 2',
disabled: true,
href: 'breadcrumbs_link_2',
},
],
}),
}
</script>
I would like to combine i18n with the Vue Router (vue3). I can setup the i18n module successfully but the integration into the routing system always fails.
The router-view is located in App.vue:
<template>
<div class="container">
<!-- Content here -->
<the-header></the-header>
<router-view></router-view>
</div>
</template>
<script>
import TheHeader from './components/TheHeader.vue'
export default {
name: 'App',
components: {
TheHeader
}
}
</script>
I access the language routes via a global object $t. The languager switcher works. So the following router-links in the TheHeader component contain the right paths to the language specific components (this.$i18n.locale always returns the right path-fragment: eg: 'en','de' etc.., this works!!):
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link active" aria-current="page"
:to="`/${this.$i18n.locale}/home`">{{ $t('nav.home') }}</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="`/${this.$i18n.locale}/about`">{{ $t(`nav.about`) }}
</router-link>
</li>
Now I stuck with the router. I found the following example here, but it does not work:
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/:lang",
component: {
render: (h) => h("router-view"),
},
children: [
{
path: "home",
name: "home",
component: Home,
},
{
path: "design",
name: "design",
component: Design,
},
{
path: "about",
name: "about",
component: About,
},
{
path: "contact",
name: "contact",
component: Contact,
},
],
},
],
});
stack trace:
Uncaught (in promise) TypeError: h is not a function
at Proxy.render (router.js?41cb:15)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:464)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4332)
at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4458)
at mountComponent (runtime-core.esm-bundler.js?5c40:4241)
at processComponent (runtime-core.esm-bundler.js?5c40:4199)
at patch (runtime-core.esm-bundler.js?5c40:3791)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4409)
at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
Principally, the language switcher should work independently from the router, with the independent global variable $t. However, I need the complete path in the URL, I need an integration of i18n into the router! How can I configure the Vue Router correctly?
import { h, resolveComponent } from "vue";
path: "/:lang",
component: {
render() {
return h(resolveComponent("router-view"));
},
},
I have made a Vue component built in a Laravel application for rendering a series of address fields:
<template>
<div>
<label for="address_line_1">Address line 1</label>
<input type="text" id="address_line_1" name="address_line_1" placeholder="Address line 1" :value="addressLine1" #input="setAddressLine1($event.target.value)" :class="{ 'is-invalid': errors.address_line_1 }" required>
</div>
. . .
</template>
<script>
import { mapActions } from "vuex";
export default {
props: {
addressLine1: { type: String },
addressLine2: { type: String },
city: { type: String },
province: { type: String },
postalCode: { type: String },
country: { type: String },
module: { type: String } ,
initErrors: { type: Object },
},
data() {
return {
errors: this.initErrors || {}
}
},
methods: {
...mapActions('collection', ['setAddressLine1', 'setAddressLine2', 'setCity', 'setProvince', 'setPostalCode', 'setCountry']),
},
}
</script>
The file is in a components directory names Address.vue, it's includes in my application templates as:
<address
module="collection"
address-line1="{{ old('address_line_1', session('collection.address_line_1')) }}"
address-line2="{{ old('address_line_2', session('collection.address_line_2')) }}"
city="{{ old('city', session('collection.city')) }}"
province="{{ old('city', session('collection.city')) }}"
postal-code="{{ old('postal_code', session('collection.postal_code')) }}"
country="{{ old('country', session('collection.country')) }}"
:init-errors='#json($errors->messages(), JSON_FORCE_OBJECT)'
></address>
And included in app.js (simplified here)
import Vue from 'vue'
import Address from './components/Address.vue'
const app = new Vue({
el: '#app',
components: { Address },
store: store,
});
require('./bootstrap');
The component does not render on the page at all. There are no JavaScript errors. Other included components are working fine.
However, I have found that if rename all references to the component to e.g. AddressX and then it renders and functions as expected.
Any clues as to why this might be?
My goal is that laravel has an implemented Authorization Provider for us
https://laravel.com/docs/5.3/authentication
so I want to authenticate my users by using that by an API and set it back to my Vue Router
and authorize the users
How can i implement it?
Im always getting an error on authentication
im using axios as my HTTP provider
Here is the app.js
require('./bootstrap');
import VueRouter from 'vue-router';
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.use(VueRouter);
axios.defaults.baseURL = '/api';
axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
import LoginForm from './components/LoginForm.vue';
import RegisterForm from './components/RegisterForm.vue';
Vue.component('login-form',LoginForm)
Vue.component('register-form',RegisterForm)
// Directives
const routes = [
{ path: '/', component: require('./pages/Index.vue') },
{ path: '/admin/users', component: require('./pages/admin/Users.vue') },
{ path: '/user/:id', component: require('./pages/user/Dashboard.vue'),
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: require('./pages/user/Index.vue')},
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'settings', component: { template: '<div>Settings</div>' } },
]
},
{ path: '/manager/:id', component: require('./pages/user/Dashboard.vue'),
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: require('./pages/user/Index.vue')},
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'settings', component: require('./pages/user/Settings.vue') },
]
},
{ path: '/store/:id', component: require('./pages/user/Dashboard.vue'),
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: require('./pages/user/Index.vue')},
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'settings', component: { template: '<div>Settings</div>' } },
]
},
{ path: '/*', component: require('./pages/404.vue') },
];
const router = new VueRouter({
routes,
});
const app = new Vue({
el: '#app',
router,
template: `<div id="#app">
<router-view></router-view>
</div>`,
})
Here is the a Login form component
<template>
<form class="form" #submit.prevent='submitForm'>
<div class="form-group">
<input type="email" class="form-control" name="email" v-model="login.email" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" v-model="login.password" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info btn-block"> Login </button>
</div>
</form>
</template>
<script>
export default {
data() {
return {
errors: [],
login: {
email: '',
password: '',
_token: window.Laravel.csrfToken
}
}
},
methods: {
submitForm() {
this.axios.post('/login',this.login)
.then(response => {
})
.catch(response => {
})
}
}
}
</script>
this is my Laravel API
in api.php
<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::group(['middleware' => 'auth'], function () {
Route::get('/auth',function() {
return Auth::user();
});
Route::resource('/users','UserController');
Route::resource('/stores','StoreController');
Route::resource('/items','ItemController');
Route::resource('/transactions','StoreController');
Route::resource('/managers','ManagerController');
Route::resource('/employees','EmployeeController');
Route::resource('/customers','CustomerController');
Route::resource('/tags','TagController');
});
Route::group(['middleware' => 'web'], function() {
Auth::routes();
});
So my BIG PROBLEM here is the authentication using vue i'm used to authentication in blade templates and laravel routes but not on vue