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
Related
We have rollup based project using postcss to transform our CSS and bundle it with the project. We are using an external library where we need to import a CSS file from as well. This file, while needs to be bundled with our package, shouldn't have there classNames transformed. I tried to to import the css as follow but this has no effect:
:global {
#import 'rc-slider/assets/index.css';
}
I am attempting to move from webpack to vite (3.1.8). (in the context of a Rails app, actually webpacker)
I use video.js. With webpack, in a .js file, I am able to both import video.js javascript, and import the CSS packaged with video.js from the javascript file, like so:
import videojs from 'video.js';
require('!style-loader!css-loader!video.js/dist/video-js.css')
The require like that isn't supported in vite. Normally in vite you can import CSS no problem, and it'll even be automatically spit out into a <style> tag. As simple as, say, import './some.css'`
But when the CSS is from an npm dependency like video.js... how do I import it?
I tried simple import 'video.js/dist/video-js.css';, as well as import '#video.js/dist/video-js.css';, neither worked. In dev, both just say "Rollup failed to resolve import" upon asking vite to vite build --development.
What is the right way to do this?
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.
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
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>