I have a project where I have placed the external js files like jquery, datepicker etc in the 'static' folder. I am importing them in the index.html file.
It is getting picked correctly when the page is directly loaded. But when navigating to the page using $this.router.push('/dashboard') the javascript does not get picked up.
Not sure if I am missing something here
Related
I recently started learning NuxtJs and create a nuxt app using the nuxt3 template. The code i used to generate the starter project is
npx nuxi init nuxt-app
However the the terminal shows that the app has been created and the dev server also starts displaying the Nuxt3 welcome page. But when i load the directory in vs code the folders like pages,store and components are not visible as seen in the screenshot below .
You are importing <NuxtWelcome /> component from node_modules folder. Delete it and replace with <NuxtPages/>. Create your own components in folder pages. Nuxt 3 imports components by itself, so you don't see them in <script> tag. <NuxtPages /> will do the magic with components in page folder. For example, Index.vue component you will see in / home page and About.vue in /about.
This behavior is a year old already: Some of the directories are missing when I'm trying to create a new Nuxt js project
The idea is to have something minimal where you could then add all the needed directories.
Benefit being that if you don't use any pages, the final bundle will be smaller (no need to being in Vue router for example). Same for the store (no need to import Vuex/Pinia), server part etc...
It's less of a "you have everything from the start" and more of a "pick what you like the most"!
I am currently merging a project from server-side rendering to static page rendering. According to the docs since nuxt 2.13 You can set the target to static inside of nuxt.config and run nuxt generate. This is correctly generating an html file for each file within my pages folder, however my pages lack all the styles. I am not sure if this behavior is expected or if I am missing something. I am currently using scss and bootstrap for the project. Any help would be appreciated.
I have a vue project setup which is working fine. I have a set of html/js/files (written by some other person, not using vue) that I want to inlcude in my project.
The layout is like -
-> external.html (includes js and css also within it)
-> external2.html (includes js and css also within it)
-> etc.
Now in my vue-component, when I click on a link, the vue router should direct it to external.html file and the css/js present in the external.html file must get executed.
How can I do that without rewriting the whole code to make it vue-compatible?
I finally finish my project and ready to deploy. I generate my html files with yarn generate then point my nginx config to the /dist file. But when I visit the site, it looks like the JS is not getting loaded. Is there a config that I'm missing?
Console.log shows about 6 of this. (I think that's the number of my components that is not being loaded)
SyntaxError: expected expression, got '<'
btw, only my footer and navbar component is visible on the page, probably because there's no js to it.
I don't know how this vuejs project render data to the web browser. Can anyone help me to explain this?
Link url: https://github.com/huytrongnguyen/vue-cms
Notice: you have to clone this project to your computer.
Vue loader in the webpack config will change all of the components into Javascript. That JS is loaded when the index.html in the dist folder is opened in a browser. After the javascript is parsed, it'll run and populate the DOM with HTML strings created by the webpack process