Just a quick question, that I couldn't find an answer to.
I have two routes "/" and "/auth".
-- pages
-- auth
-- index.vue
-- index.vue
When I call "/" everything is fine. When I call "/auth" with a <NuxtLink to="/auth" /> component, everything works.
But when I call the url http://localhost:3000/auth directly, I get the base Nuxt 3 404 error screen.
Is this a config setting I'm missing?
Cheers
I found the answer myself:
If I want to use yarn dev I need to first call yarn generate.
Hope this helps someone else, too.
Related
I am trying to access env variables using a .env file in a VueJS 3 project, following the docs of vue 3 and some issues over here, but nothing seems to work.
I already checked, the .env is inside the root, i've already stoped and re-runned the project hundreds of times, rebuilt, everthing, and i'M STILL GETTING unfefined on this shit, and i found out always the same tips, and lot of people complaining about this feature.
If you use Vue3 + Vite, you must type the good syntax. In your .env file rather then VUE_APP_ACCESS_TOKEN change it to VITE_ACCESS_TOKEN.
Then restart your app.
Now in your components/pages you can access it via:
import.meta.env.VITE_ACCESS_TOKEN
example:
<script setup>
const accessToken = import.meta.env.VITE_ACCESS_TOKEN;
</script>
Hope it helps!
Integrating Algolia search with VSF/Next branch, got the basics down. Moving on to routing.
With Vanilla Nuxt the integration works as it should, although the workarounds are starting to stack.
To Repro:
pull && yarn && yarn run dev
http://192.168.1.4:3000/ && search for something
URL gets rewritten
checkout VSF get a flicker re-render.
To Repro:
same as above except go to /Search
URL gets rewritten for a flash then render fires and goes back to original route
What I’ve tried:
Built the two repos in isolation and it seems to not be an issue with nuxt itself, more an issue with Vue StoreFront
Reference:
https://github.com/algolia/vue-instantsearch/issues/916 (tangential)
Okee this has something to do with the nuxt comp passing the route <nuxt :key="$route.fullPath"/>
I was able to bypass it by doing this in the default template
<div v-if="String($route.name) === 'Search___en'"><search/></div>
<div v-else ><nuxt :key="$route.fullPath"/></div>
Basically bypassing the comp with the key which was triggering a re-render because it uses the router under the hood... I'm guessing.
This is what eventually allowed me to use the integration code effectively: https://github.com/ed42311/algolia-vsf-routes/blob/main/layouts/default.vue#L11
While this solution works, Other suggestions are appreciated.
I'm currently trying to use a custom component (https://github.com/wolfika/vue-playing-card) in my demo application built with Vue CLI.
First I've tried in a JS Fiddle (https://jsfiddle.net/xwb59m8g/1/) and everything works as expected just by importing the <script> (as explained in the Github "Browser" section) and using the <vue-playing-card> custom component. Than I've tried including the component in my Vue CLI app by following the instruction on the Github page under the "Bundler (Webpack, Rollup)" section and everything works.
My problem is that, for some reasons that I will explain if you need to know, I have to include this component using the <script> tag, as in the JS Fiddle, and not with the "Bundler (Webpack, Rollup)".
I tried including the <script> tag at the bottom of my index.html file but when I try to include the custom component in my Vue application this error gets printed in the console:
Unknown custom element: - did you register the component correctly? etc.
I really don't understand what it's happening since in the JS Fiddle everthing works as expected... can you help me? Thanks in advance and sorry if this is a stupid question, but I've tried and searched all I could.
Just started using Nuxt, and I love it so far. I just have one specific issue, I'm using prismic.io as headless CMS for my personal page. I have a few pages and a "blog" page. I'm having an issue when navigating to the blog route, it returns page not found. Now, it's kind of odd because it's working perfectly in my local host, it's just behaving that way when deployed.
Site's being deployed on Netlify.
I already tried switching the route's links and building the project on my local machine and it's working like charm.
Link to site:
https://wonderful-gates-27a024.netlify.com/
This is my file structure for the pages:
Pages/
-- blog/
---- _uid.vue
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue
Steps to replicate the issue
Navigate to about
Navigate to contact
Navigate to blog (Sometimes the error shows on this step)
Click on an article
Navigate back to the blog (here it should display not found)
Steps to navigate back to blog after the error shows up:
On the url bar, paste wonderful-gates-27a024.netlify.com/blog and hit enter.
I'm getting page not found error
It works sometimes because you are navigating to
https://wonderful-gates-27a024.netlify.com/blog/
Which is different from
https://wonderful-gates-27a024.netlify.com/blog
the page which is /blog
https://wonderful-gates-27a024.netlify.com/blog
doesn't exist while the page
https://wonderful-gates-27a024.netlify.com/blog/
exists. which is /blog/_uid
so if you want it to work make
Pages/
-- blog/
---- _uid.vue
---- index.vue// make this file and the /blog will work
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue
We just had this error occur and it was caused by renaming About.vue to about.vue on a MacOS machine.
Git doesn't recognize it as a new file, so when you deploy the app on a Linux machine, the problem occurs.
The solution is to rename the file from a Linux machine, so that git recognizes it.
You could also probably accomplish it by renaming the file from Blog.vue to new-blog.vue and then renaming it again to blog.vue.
This is all caused by the fact that files aren't case sensitive on MacOS but they are on linux. You will see it where you have:
<NuxtLink :to="{ name: 'blog' }">
It must be blog.vue to match the route name because the filename leads to the route name. On Linux, the crawler will name the route "Blog" if it is Blog.vue.
You don't want uppercase filenames with nuxt, because they will lead to URLs such as /Blog. I don't recommend having uppercase in your pages directory.
We've now released the updated nuxt-prismic module to solve this dynamic routes issue and enable previews. You see how to migrate your project by following this article:
https://prismic.io/docs/vuejs/getting-started/the-new-prismic-nuxt-module
Also you can see a project enabled with the module already here:
https://user-guides.prismic.io/en/articles/2831943-nuxt-js-sample-multi-page-website-with-navigation
I set up a new vue-project that was created using vue ui and manually selecting the features.
The features are the following:
Babel
Router
Vuex
Use config files
and only that, and run the project using the development mode; however, an error occur in the console (Dev tools) showing an unknown elements for router-link and router-view.
https://github.com/JeromeDeLeon/vue-router-bug
That is the repo (a newly created one like hello world program). I already posted an issue on vue-router github page but eventually got closed because they said that everything was working properly, but it is not working for me.
I tried changing the Router to VueRouter on router.js, but the result is still the same.
I tried transferring the code of router.js to main.js, but still not working.
The expected result is to show the content of Home.vue in order to check if router is working.
The actual result shows the "Home | About" only in the top-middle of the browser and nothing else.