I am using axios inside a vue component and trying to call an "external" php file. I have my src folder. Inside that are my components. My root is court. I have a folder named ajax where all of my php server side pages live. From my component I am trying to call a page from the ajax folder but don't know how to get to it.
Court\
ajax\
results.php
src\
components\
search.vue
So in search.vue i have an axios call
axios.get('ajax/results.php',.....
But it never reaches that page. I am also using the built in server and when I try http://localhost:8080/court/ajax/results.php it can't find that page. How do I call results.php?
Related
I've created a blog with Nuxt that has dynamic routes for each of my articles (articles/_slug.vue). Inside the _slug.vue file I grab markup content from a strapi CMS using asyncData.
aricles/_slug.vue
After running nuxt generate followed by nuxt start and navigating to an article page in my browser, when I open the page source I find that there are numerous Js files being imported /_nuxt/{randomNumbers}.js and a single div with an id __nuxt , most likely resembling an SPA format.
page source of an article
This does not occur with my index.vue page as when I view the page source for index.vue all my content is in the HTML.
Its important that the google crawler is able to index the content on my article pages, so the page source not containing the blog content is not ideal.
What I don't understand is that when I open the dist folder generated by nuxt I find all my articles in subfolders containing HTML files hard coded with my blog content. So I am wondering why isn't nuxt serving these HTML files , and is there a way to do so ?
distFolder
As far as I know all pages and components go in one component called Nuxt and I think the "__nuxt" element is that. By the way using asyncData and 'nuxt generate' won't make your app server-side dynamic because 'nuxt generate' generates a static site and while using 'nuxt generate' all asyncData hooks will be called once. For the hard coded blog posts I think you should disable Nuxt Crawler in your nuxt.config.js.
Nuxt Docs: The Generate Property #Crawler
export default {
generate: {
crawler: false
}
}
It seems as though after hosting the project on Vercel the static behavior works accordingly. When testing the website locally (nuxt start) the content isn't pre loaded into the page source it continues to act as a SPA on dynamic routes. However after deploying to Vercel the blog content can be found in page source.
I am creating a website with simple javascript games
I store the games under /static so fx /static/somegame/ which has an index.html file with a bunch of stuff
However, if I am on my root page index.vue and I click a button that should route me over to somegame it does not load, however, the address bar says http://localhost:3000/somegame and if I reload the page, the game loads.
What static magic must I do?
Note: The nuxt app is running in spa mode ... but I am open to anything
Nuxt by default creates an instance of Vue-router and maps the files in your /pages directory to the appropriate routes. So if you want to reach something at http://localhost:3000/somegame, you would create a file called somegame.vue in the /pages directory.
Difficult to imagine exactly why you’d want to use index.html files inside a nuxt project— can you move the code from there and place it in the page files (.vue) instead?
I'm trying to create a nuxtJS module to make some changes to the routes based on the URL or request, i simply want to access the request.header.host inside a nuxtJS module but I'm unable to get it, i tried to check it process.server, this, context but unable to get the request object, i just want to get the full domain only, so how can I do that?
You can only get the hostname in the Browser JavaScript not internally in running nuxt app. As for nuxt app, it is running locally on the server (for example http://localhost:8080).
The information regarding hostname is present in services like Nginx/Apache.
Solution (One of them):
Use #nuxt/dotenv and store hostname in the environment variables:
hostname=example.com
then use wherever you want in your nuxt application with process.env.hostname
$ tree .
.
├── main.go
└── static
└── output_of_npm_run_build
I used vue.js with vue router for the frontend and golang for backend. What I tried to accomplish:
use golang (either standard library or gorilla/mux) to take care of example.com/api/...
vue router to take care of all vue components (example.com, example.com/about, example.com/login, etc.)
RESTful APIs example.com/post/{post_id} for both frontend and backend
If I go to example.com and click the button about, vue router would display the about component and change the url to example.com/about without talking to the backend, which is expected. But if I enter example.com/about directly to the address bar and press enter, the request goes straight to the backend. Since the file about does not exist, it returns 404.
Is there a way to return static/index.html and somehow tells vue router to render xxx component even if example.com/xxx is sent directly by the browser to the server (with exception of example.com/api)?
Who should be responsible for routing example.com/post/{post_id}?
You need to update the hosting configuration. This issue used to be happened whenever I used Front-end JS frameworks such as React, Vue and so on.
So if you type example.com/about manually on address bar, the page would show '404 Not Found`.
I recommend this answer to solve your issue.
Vue router is not working with nginx
Working on a Nuxt project and trying to programmatically change route.
In a method I am using this:
$nuxt.$router.push({
path: `vehicles-for-sale`
})
This looks like it initially works, but it then causes a page refresh to '/vehicles-for-sale?.
Is there anything different I need to do with Nuxt to get this working? I have a pages folder called 'vehicles-for-sale' and an index.vue file within that.
Simply use this:
this.$router.push('vehicles-for-sale')