I am messing around locally with a laravel and vue project, I also have vue-router setup but my URL look like this: <virtual-host>.loc/#/.
Whenever I access my v-host it loads but I get this weird #/ thing appended to the end of the URL. Does anybody know where it comes from? Is it a JS thing?
by default vue js use hash mode. that's why you see that type of url. to change this behavior you need to set mode property to history like this,
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Related
For some reason adding subdomain route isn't working and keeps on returning my homepage instead of the page I need. I'm using Laravel, Inertiajs Vue in my app.
Here is my route:
Route::domain('webshopview.localhost:8000')->group(function () {
Route::get('/webshopview', function () {
return Inertia::render('Products/Index');
});
});
I want to be able to access it as webshopview.localhost:8000 but every time I try to visit this route it returns my app home page. If I do this in normal route like the below example, it works like a charm.
Route::get('/webshopview', function () {
return Inertia::render('Products/Index');
});
What is missing to create a subdomain for group of routes? Why it keeps returning the app homepage ignoring the subdomain
My app works locally on 'http://localhost:8000/' and 'http://127.0.0.1:8000/' and it works like that by default without me doing anything. So all I want is to add subdomain to specific routes so that I can access like this 'example.localhost:8000' or 'example.127.0.0.1:8000'. The end result is to have the route displayed like this after deployment 'https://www.subdomain.domain.com'
I even tried this and it didn't work:
Route::get('/productview', function () {
return 'First sub domain';
})->domain('productview.localhost');
now accessing 'http://productview.localhost/' returns 'This site can’t be reached' error.
I had to manually add the routes in my etc/hosts file on windows and restart the entire machine for it to take effect.
I am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
I have a laravel application with my front-end written in Vuejs. I want to prerender the public pages only. What is the correct configuration for the prerender-spa-plugin to do this?
Most tutorials on the web show how to do it for the whole website, but I need only few pages pre-rendered. I must be missing something but I get only a blank page and my javascript is not loaded during the prerendering. I am not using vue router.
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
// In the mix webpack config -
plugins: [
...
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'static'),
// Required - Routes to render.
routes: [ '/' ],
})
]
Error message: Unable to prerender all routes!
The javascript/vue files etc for the static part should all be in the static directory. It won't work if they are in the folder you normally use for organizing the rest of your application.
You need to use HTMLwebpackPlugin to copy over the html to the output directory (say, in public). Mix's copy happens too late. Chunks will help get only the js files you want.
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
I have create a Polymer based Dashboard which I want to integrate with my Laravel site. My Dashboard is working fine but I have issues with routing in Polymer.
I want my Dashboard to reside at:
http://example.com/dashboard
I have set up my Laravel route as follows:
Route::get('dashboard',function(){
return View::make('polymer.dashboard');
});
and my dashboard urls should be like:
http://example.com/dashboard/#!/feedbacks
But, I am confused about what setting to make in app.js. Current app.js:
// Sets app default base URL
app.baseUrl = '/';
if (window.location.port === '') { // if production
// Uncomment app.baseURL below and
// set app.baseURL to '/your-pathname/' if running from folder in production
//app.baseUrl = '/dashboard/';
}
Under these settings, when I navigate to http://example.com/dashboard, when Polymer finishes loading, the url changes to http://example.com/.
If you haven't told the router to not use hashbangs then navigating to /dashboard won't work, it's expecting #!. You'll need to go into app/elements/routing.html and remove the line that says hashbangs: true. You'll also need to set the baseUrl to /dashboard/. Your server will also need to always return the index.html for any URL that starts with dashboard. So if the user tries to go to example.com/dashboard/feedback it should send down the index.html page again.
After you've made the change to routing.html, go into the devtools settings and enable Disable cache (with dev tools open). Then reload the app to make sure it isn't serving a cached version of the file.