I have a question about webpack or compiled vue files and its cache management.
Somehow the browser knows when to fetch the app.js files when there is a new compiled version. When none then uses the Cache (or theres a 200B only download to it).
I would like to know the mechanism behind the automatic detecting of the js file.
Is it a feature of webpack? or vue?
Thanks IA
Hot reloading is a feature of vue-cli, implemented using Webpack.
From the docs,
When scaffolding the project with vue-cli, Hot Reload is enabled out-of-the-box.
When you're developing with Vue locally, Webpack is typically in Watch Mode, which means it detects changes to your files and recompiles automatically.
How the DOM refreshes depends which part of the Vue component you have changed.
If you change the Template portion of a component, it will re-render without reloading because the component's internal state has not changed.
If you change the Script portion of a component, the component will reload.
More info about Vue's hot reload
As for the app.js file, you'll see it's actually the initiator of the requests for the DOM diff, which run every time you save changes to your Vue files.
When you save a file, [hash].hot-update.json is requested. If [hash].hot-update.json has a non-empty payload, DOM-affecting changes have been detected. The DOM diff is then requested and applied as a patch via app.[hash].hot-update.js.
Related
In my Quasary CLI project I include my own js files like this:
import Task from "src/js/task.js"
When I change something in this file (task.js) and save it, my changes are not visible or functional with hot reload. However I see this in the console:
[vite] hot updated: /src/components/kk-phase-tasks.vue
So hot reload seems to recognize a change and updates.
Even after reloading the page my changes are not build in.
Only after closing the dev server and start it again (quasar dev) my changes are reflected.
Do I have to define folders or files that vite should update?
What am I missing?
The reason for Vite not updating my js files with hot reload was an uppercase letter in my import statement.
My import was actually:
import Task from "src/js/Task.js"
but the filename is task.js (lowercase).
While the file will be included when the server starts, it will not be reloaded when the file changes.
I am new to nuxt js. I have a template of nuxt js which I am working on. In router.js I added some new routes, that's working fine, but when I run my development server again npm run dev, the updated code is just removed. I see the old code there. And it only does for the .nuxt folder. Not for the vue components.
Can anyone suggest something? Thanks.
Nuxt uses a method called File system routing, with that routes.js file is automatically generated according to your configuration and pages created, that is why your changes get removed
If you have a specific requirement that need more customization you can extend the router config
I'm creating a Bootstrap Vue application (built with Vue CLI), and there's a Javascript library I want to be able to utilize: https://nadchif.github.io/html-duration-picker.js/. I tried putting the file in /assets and then using import in the script portion of App.vue (import './assets/html-duration-picker.min'), but I have not been able to get the script to work, not sure why (nothing happens, no duration picker shows). As an alternative, I thought I could maybe simply load the library in the traditional way in the head of index.html. But I'm not clear what the src URL should be for a file in the assets directory. Or should it be in the assets/public directory?
Honestly, you might as well use the npm package, if you are using Vue CLI, to save yourself a lot of trouble:
npm i html-duration-picker
DOCUMENTATION.md is where the installation instructions lie. While there aren't any for Vue, there are instructions for Angular, and it's fairly easy to get it working for Vue.
Just import html-duration-picker:
import * as HtmlDurationPicker from "html-duration-picker";
...and initalize it in mounted():
mounted() { HtmlDurationPicker.init() }
You can also run HtmlDurationPicker.refresh(); to "update dynamically loaded input boxes." I don't think this is necessary if you use v-model to bind the boxes' values to data properties which update fine from either end.
Here's a sandbox you can check out for more info.
If you do want to import it manually from assets, though, then what you're doing is probably fine (though you might need to add the .js to then end of the path); you'll just have to initialize it.
I have a vue.js router implemented and if I run npm run build it correctly creates separate files for every component. But if I run npm run serve and then open the page all components files are loaded immediately not lazy. If I click on the link to component it loads the components file again. I don't understand why it is not lazy. Look at the screenshot. There are contact.js (which should be chunk) loaded two times. First on refresh second on link click.
it's called prefetching. vue-cli 3 does this by default as explained here.
Regarding the chunk being loaded twice, I suggest that you build in production mode and then check the actual response of both the duplicate requests. I think the second time, the chunk only gets loaded from browser cache and does not make a network request
I have a PHP project that uses Kirby CMS. I also use Gulp for building my assets. Now, I need to add a calculator on the homepage that is complex enough to justify the usage of Vue. How would I incorporate Vue in my project without introducing a ton of new tooling? All I want is a simple Single File Component basically. I have:
<div id="calculator"></div>
and I want the component to be rendered there. Nothing more.
After some consideration, I came up with the following options but found issues with each of them:
Use the Vue CLI for instant prototyping. That's the closest solution for my use case, but I can't easily develop the component. If I use vue serve, I get to see the component isolated in a new page. The issue lies in the fact the component isn't a part of my project's page. It's not affected by its stylesheets, layout, and other scripts. I can't know if it'll work properly once I build it and view it in my project. Running vue build on each change would be pretty painful and time consuming. Sadly, vue watch isn't a thing, which leads me to:
Creating a project and using Vue CLI Service. If I create a project, I'd be able to run vue-cli-service build --watch and have my component automatically refresh on each change of its source file. While developing the component, I simply make a change, wait for it to compile, and refresh my project in the browser to see the modified component in action. While that would work, it introduces a bunch of node_modules inside my project, along with a package.json. I feel that's too much for just a single component. It would pollute the project more than I'd like:
assets/
js/
build/
calculator/
dist/
node_modules/ # modules here
public/ # I don't need that
package.json # package here
package-lock.json
App.vue
scripts/
main.js
content/
site/
node_modules/ # modules here as well
panel/
package.json # package here as well
package-lock.json
index.php
I would basically have a project within a project.
Use vueify to compile the component with Browserify and Gulp (which I already use). While this appears OK, vueify is deprecated and not supported. Besides, I'd have to add a bunch of stuff to my gulpfile.js in order to use Babel + ESLint for the component.
How do I set up Vue in such a way that I'm able to develop a very simple component as a part of a larger project with as little friction as possible?
If anyone has dealt with a similar problem, how did they solve it?
I ended up using the second approach I mentioned in my question with one small twist - I initialized the Vue project in my main project. I merged them.
I opened the parent folder of my project in a terminal.
I ran vue create my-project where my-project was the actual folder name of my project. The CLI asked if it should overwrite the project or merge it. I chose merge.
After the project was created, my old package.json was overwritten and only had the Vue dependencies listed in it.
I reverted my old package.json and installed these packages: #vue/cli-plugin-babel, #vue/cli-service, vue-template-compiler, and vue.
I added the following npm script in my package.json:
"scripts": {
"calculator": "vue-cli-service build assets/js/calculator/main.js --watch --dest assets/js/calculator/build"
}
Result
My project's folder structure remained the same, except for a few new packages in node_modules. I put my component files in assets/js/calculator/. There, I have main.js which is the main component script, and build which is a folder containing the processed component.
I have:
<div id="calculator"></div>
in my page, and:
<script src="/assets/js/calculator/build/app.js"></script>
in the footer. When I open the page, the component is rendered correctly.
To modify the component, I simply run npm run calculator in a terminal, which spins up the CLI service. It monitors the main.js file and builds the component on each change. Once the build is complete (which happens in under a second), I refresh the page and the updated component is there.
Conclusion
I believe that's the smoothest way to handle this use case. It didn't bloat the project, all dependencies were listed, and the development experience is great. The part where my package.json got overwritten was a bit concerning, but other than that - it worked perfectly. If there's a better way to do this, please leave an answer!
This is probably not the answer you're looking for but if I were you I'd look into inline templates and x-templates as they seem well suited to your use case.
Also have a look at this blog post. It offers a nice write up about the different template authoring methods in Vue and their pros/cons.