I have a basic project in VS code, and quite a simple task. I want to include an old javascript file in my project the correct way, so it gets loaded in the browser.
The file should be located in src\assets\scripts\oldLegacyScript.js
I tried this hack: How to add external JS scripts to VueJS Components which injects a <source> tag in the document on runtime. This only works if I put the .js file in the generated public folder in where the compiled files will be. If the file is not in the public folder the browser tries to download the index.html file, which I cannot understand:
If i follow this solution: Importing javascript file for use within vue component I get syntax errors on the import statement:
So how the heck do I overcome this simple task of importing a simple javascript file in my Vue project?
Import like this
<script>
import * as myKey from '.src/..';
export default {
}
</script>
Related
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
I am trying to convert an HTML template into vue project. I am very much confused about where to keep my css js files. Whether it should be in the public directory or it should be in the src directory?
you can keep your CSS and Js file inside the src directory rather than public.
public is used for keeping your static file such as static JSON, image, etc. which will not go through webpack.
Inside src/assests paste your css, fonts and image folders
like here
then make sure to include them in main.js/ts
eg.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css' //boostarp
import './assets/css/materialdesignicons.min.css'
import './assets/css/tiny-slider.css'
import './assets/css/style.css'
import './assets/css/colors/default.css'
if it uses boostrap install npm install bootstrap as you will have to inlude them as I have shown above. as per Bootstrap Doc.
NB: Vue3 does not support boostarp 4, and vue-boostrap use boostrap 5 instaed
I’ve a NuxtJS app and want to include a file called app.js (located in assets/js/app.js).
Contents of that file:
// imports from node_modules
import 'focus-visible';
import 'other-package';
…
What I am doing at the moment is to import that packages inside layouts/default.vue … but it doesn’t feel right.
How would you do it?
Importing the assets file is no different than importing any other JavaScript file from another src directory:
import '#/assets/js/app'
It's hard to say whether this usage is "right" without more context, but I don't see anything wrong with doing that.
I want to load a .jscad file into a vue component.
I have set up an vue-cli project, installed this openjscad-vue viewer using npm and am using the openjscad component. This component has the prop design which should allow specifying a path to a .jscad file for the openjscad viewer. This is not working properly.
Tried to find the error and do a workaround:
Inside this component (OpenJscad.Vue) is a fetch() request to load the .jscad file, but it doesnt work. To be sure that the openjscad processors is working correctly I used a plain string containing the .jscad code as source and this works!
But I want a whole .jscad file loaded.
I think the fetch request is the problem. I only need a static .jscad file to be loaded from the same server the vue-cli project is serving.
I've tried this:
using axios:
async mounted() {
[...]
await axios.get("/logo.jscad").then(response => (this.source = response));
installed raw-loader/file-loader and configure it inside vue.config.js. Imported the file from the assets folder. -> Webpack loader error. It seems to me that vue.config.js is ignored?
import logo from "logo.jscad"
this.source = logo
Any recommendation to solve this problem?
Thank you.
To answer part of my own question and maybe help other people:
the vue.config.js file do not have to be at same directory as package.json. It is only loaded and used after put inside the /src directory next to main.js or App.vue
Our environment has setup a private git repository and configured jspm to install packages from this repository. The repo has a .js, .html, and .css file. Jspm brings all the files down into a folder with #master appended to the name to reflect the branch and stores it all in the pre-configured jspm_packages location on my machine. It also adds a second #master.js file next to the folder with export statements inside (I didn't create this file myself).
These files represent custom elements I want to use in my aurelia application. There is a .js for the viewmodel and a .html for the view (and a .css file). When I go to use the custom element I get a 404, file not found, because system.js is looking for a #master.html file, which doesn't exist.
Jspm seems to be referencing the #master.js file in config.js and somehow that's assuming a #master.html file in Aurelia? Only a #master.js file was created when I installed the package using jspm. The original .html file does exist and lives inside the folder I mention above, but that #master.html file does not and I'm not sure 1) what that file would be for and 2) why it's being referenced. There no reference to #master.html in my code.
I'm not really even sure if this is a JSPM issue, Aurelia issue, System.js issue, or some combination of them?
Anyone else have a similar experience with these technologies?
Thanks,
Chris
Essentially, Aurelia believes you are importing your repo as a custom element, so when you are importing the #master.js it is looking for the matching "view" of what it assumes is a viewmodel.
It sounds like you need to structure your repository as a plugin. Add an index.js file at the top level and make that responsible for running the configure function, which should make the components you want global resources. Ensure your package.json points to your index.js as the 'main'. After that, you would need to add a .plugin('your-package-name') in the main.js file, just like any other plugin.
An example index.js is like so:
import {Options, GLOBAL_OPTIONS, DIRECTION} from './options';
import {Dragula} from './dragula';
import {moveBefore} from './move-before';
export {Dragula, Options, DIRECTION, moveBefore};
export function configure(config, callback) {
let defaults = new Options();
config.container.registerInstance(GLOBAL_OPTIONS, defaults);
if (callback !== undefined && typeof callback === 'function') {
callback(defaults);
}
config.globalResources(['./dragula-and-drop']);
}
(taken from here)