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.
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
In the docs directory (docusaurus project) I create markdown files and these MD files contain imports from external react project (it's a local project placed in other directory).
Everything works fine, but one tiny thing. Now I import files like this:
import Component from '../../../react-project/src/components/Component';
I don't know how to shorten the path. I'd like to write something like this:
import Component from '#components/Component';
How can I do this?
If you have your separate components within a git repository, you can reference that repository as an imported module.
npm install git+https://github.com/yourUser/yourRepositoryName
import {Component} from yourRepositoryName
Could someone explain why this:
import React from '../node_modules/react';
is the same as:
import React from 'react';
and this:
import './App.css';
is NOT the same as:
import 'App.css'; or import 'App.css';
in the later example I get a message that the file App.css can not be found in the src directory but it is there.
It identifies the modules by name
But files it detects only by path
As you will see in the documentation
module-name
The module to import from. This is often a relative or absolute path name to the .js file containing the module. Certain bundlers may permit or require the use of the extension; check your environment. Only single quoted and double quoted Strings are allowed.
name
Name of the module object that will be used as a kind of namespace when referring to the imports.
Installed Node Modules can be imported without specifying the path.
App.css is not a node module and therefore the path needs to be specified
Since the release of create react app V3 you can also type out absolute paths instead of the sometimes confusing method './../file.js'
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>
Let’s say we have a package named “mypackage” that we own. We also use this package in another project: “my-client”. Once installed, “my-package” is saved inside the node_modules directory of “my-client”.
There’s a specific file inside this “my-package” that I want to import in “my-client”. Let’s say the path to this file is: “node_modules/mypackage/dist/components/my-component.js”
I know that I can import this file as follows:
import myComponent from ‘mypackage/dist/components/my-component’
However, for a better dev experience, I want to be able to just say:
import myComponent from ‘mypackage/my-component’
I feel like this could be achieved by some package.json magic inside “my-package” but I can’t figure out how to do it.
Things I tried:
Setting the “main” key to “dist/components/index.js”
Setting the “module” key to “dist/components/index.js”