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?
Related
I have a Next.js site that exports to S3. Ive configured the S3 error_document to point to index.html so my dynamic routes work on reload. But now any unknown route is showing as the index page.
Is there a way to have..
Dynamic routes like /items/[id].tsx which use NextRouter's useRouter should work when reloading the page by loading index.html
Unknown pages show my custom 404 page 404.tsx (rendered to 404.html). Ideally with the right status.
Thanks
PS, my set-up setup is similar to this guide this guide, except that doesn't support dynamic routes.
I have a single page site with some content management on the homepage.
The homepage content file is here
/content/index.md
which references the template home in
/pages/_home.vue
So I want the build step to spit out an index.html. It works in dev but when I npm run generate there is no index in the /dist directory. This also means when I push up to Netlify, the homepage is a 404.
Do I need to set this routing up explicitly in the nuxt config?
I solved this by renaming /pages/_home.vue to /pages/index.vue. You don't have to use the dynamic page convention if its a standalone page and you still get to use content
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 have a single page (SPA) application written in Vue.
Now I need a separate page that should be available without being signed in.
To me it seems like a need to enable multi page app (MPA). I see in the documentation (https://cli.vuejs.org/config/#pages) that I need to set this up in vue.config.js. But I the documentation is unclear to me. Do I need to edit/rerun the Vue CLI setup? Or do some webpack changes. Just adding a new page entry with corresponding files does not work (webpack does not insert anything in html-file).
From SPA View, i would likely go like this
Inside /views folder
- HomePage.vue (no auth)
- Login.vue
- /users/ subfolder (auth needed)
- DashBoard.vue
- About.vue
etc
Then define the routes (paths,components,etc.) with requiresAuth as auth-check, redirects back to the route with HomePage.vuecomponent then.
and SPA mostly comes with MPA Challenges such as SEO, SSR concerns. The routing roughly the same to Vue/Nuxt.
I have a project that has to have specific url naming like so
example.com/desktop/index
example.com/mobile/index
I am trying to use Nuxt for this. I thought it would be simple enough to create two folders, one desktop and one mobile, each with an index file. But Nuxt automatically sets the route of any index file in a folder to that folder's name. So my file structure looks like this
pages
desktop
index.vue
mobile
index.vue
and the routes come out as
example.com/desktop
example.com/mobile
Does anyone know how I can force the /index to show in the url?
You can put index.vue in a directory called index:
pages
desktop
index
index.vue
mobile
index
index.vue