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.
Related
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 am trying to add a paintworklet to my application, but I am having a really hard time.
The worklet is a npm dependency, but worklets can't be inlined, they need to be registered like so:
CSS.paintWorklet.addModule('url/to/module.js');
I am having a hard time, because even though that currently works in my application, I am not sure if this is the right way to go about it, or if it will work in production. Currently, my url points to a file inside node_modules and I am not sure if nuxt will do anything with this.
I am currently doing this with a .client.js file inside the plugins folder. But they need an export default function(), but the worklet code does not have an export.
What I am currently trying to do, is tell nuxt somehow to grab certain files from node_modules and serve them as assets somehow, and then reference them some other way. But I cannot find any resources on this.
Any ideas would be appreciated.
If the file path is specified in a literal string, containing node_modules, the paint worklet might appear to work in development mode, but the worklet file will not be bundled in the build output:
CSS.paintWorklet.addModule('./node_modules/extra-scalloped-border/worklet.js')
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
❌ file not bundled in build output
Solution: Import the file
Importing a file enables the bundler to track the file, and include it in the build output. Nuxt 3 uses Vite by default, and the Vite docs describe how to import the file to use with paint worklets:
Explicit URL Imports
Assets that are not included in the internal list or in assetsInclude, can be explicitly imported as an URL using the ?url suffix. This is useful, for example, to import Houdini Paint Worklets.
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
Since the CSS.paintWorklet API is only available in the browser, make sure to use this in the mounted() hook, which only occurs client-side:
import workletURL from 'extra-scalloped-border/worklet.js?url'
export default {
mounted() {
CSS.paintWorklet.addModule(workletURL)
}
}
demo
vue-pdf works (I see the rendered PDF) when I'm running the Vue app in hot-reload mode, but when I build the project, it doesn't work (the PDF doesn't show up), and I see an error in the console:
GET http://client.resolutewl.com/bfa0c7848d81ecc3380c.worker.js 404 (NOT FOUND)
How the webpage looks when running the Vue app in hot-reload mode:
How it looks when using the built code (including the error message):
Possibly-related links
Vue pdf not working in chrome after build
Absolute path for worker.js
I solved this by adding a custom Flask route that handled requests for files ending in worker.js and looked in the correct folder for that file:
from flask import send_from_directory
#<YOUR-BLUEPRINT>.route('/<worker_file_name>.worker.js')
def worker_file(worker_file_name):
return send_from_directory(os.path.join(<PATH-TO-YOUR-TOP-LEVEL-DIRECTORY>, 'dist'),
'{}.worker.js'.format(worker_file_name),
mimetype='text/javascript')
This problem was happening because the blueprint in my Flask app handling the Vue app's HTML/JS was configured to look for templates (including the Vue app's index.html file) in the ./dist/ folder, and the static files in ./dist/static/ folder, and this was allowing the Vue app to work, but there was nothing in the Flask configuration telling it how to handle a request for the worker.js file (worker-loader creates those worker.js files and is a dependency of vue-pdf).
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.
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.