as you can see I tried to import the js from src/store
I tried the following path but none of them working.
./store/member.module
/#store/member.module
member.module
Previously I used /#store/member.module for my others Vue project but somehow it is not working in vue native
You forgot src
./src/store/member.module
I suggest to create a folder named member with a js file in it module.js. Better avoid these dot notation names
Related
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'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.
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 want to add videoJS player to polymer app ? How to Adding External JS libraries to Polymer ?
Thanks
You need to wrap your JS dependencies in an import file.
Create a new html file call it myVerySpecialLib-import.html.
Add a script tag to that file which points to your library
In the Component in which you want to use your lib import that myVerySpecialLib-import.html file
That's it! Now, you can use your library in your component.