I don't want to use Vue-Material nor Vuetify.
I want to use Materialize.
What I do is:
npm install materialize-css#next
In main.js, where my new Vue App is defined I import Materialize like this:
import 'materialize-css'
Somehow the javascript is working, but the CSS is not loading; I test it with a Card Reveal.
The swapping animation works, but it is not styled. Card Reveal is one of the reasons why I want to use MaterializeCss, those other two don't provide this functionality. And I also want to use 'normal' HTML elements instead of using 100 of new elements (for example in vuetify).
Step 1: installation
npm install materialize-css#next --save
npm install material-design-icons --save
Step 2: import materialize css in src/main.js
At src/main.js
import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'
Step 3: initialize materialize components
Add following code in your component(say App.vue):
import M from 'materialize-css'
export default {
...
mounted () {
M.AutoInit()
},
...
This line imports the javascript (the entry point of the npm module from node_modules folder):
import 'materialize-css'
To import the CSS files just do this:
import 'materialize-css/dist/css/materialize.css'
I would also recommend you add the materialize css CDN in the index.html. Aand also create a script tag and add this:
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
});
Related
I created blank Vue3 + Vite project using
npm init vue#3
I am wondering how can I install my components from src/components like for example in lodash library:
npm i lodash.debounce or my-app/component
Thank you!
I have tried to create index.js file in src and export components:
import Button from "#/components/Button/Button.vue";
import Header from "#/components/Header/Header.vue";
export default {
Button,
Header
}
but it didn't work.
I found a solution, it is called Monorepos, Lerna implements the thing I need.
Here is the link
I create my react npm package using webpack but when i install my npm package to my react project, package styles are not apply on classes. Why this happens
Here is the link of npm package. You can install 0.0.5 version. In my webpack i used style-loader but it shows me document is not defined errors but if enable following line
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Document not defined error resolved but styles not apply on classes in react project
Here is webpack file image
Here is package.json file image
Here is Test.jsx file image
Here is the main.css build file image which webpacks generates
Here is the test.js build file image which webpacks generates
Here is test.scss file image
Your webpack is working fine. You just need to import your styles manually from your build. This usually has to be done for all packages which define styles.
For ReactStrap you have to add this for styles
import 'bootstrap/dist/css/bootstrap.min.css';
For AntDesign you need this
import 'antd/dist/antd.css';
Same way you need to take import your styles from your build. i.e
import "#afiniti/test/build/main.css";
And your styles would start working.
Example code
import Test from "#afiniti/test";
import "#afiniti/test/build/main.css";
export default function App() {
return (
<Test />
}
Here is a link to a simplified working codesandbox. Good Luck!
I'm trying to use hammer.js on my project, however I'm having trouble importing it. I have installed the library through npm by npm i hammerjs. Imported it on my main.js file as import 'hammerjs' and then when I do
var hammertime = new Hammer(myElement, myOptions)
hammertime.on('pan', function(ev) {
console.log(ev)
})
I get errors saying Hammer is not defined. What is the correct way to import libraries in vue?
You can include hammerjs with:
import * as Hammer from 'hammerjs'
A side note: You can do the same to include other libraries installed with npm in your vue project. For example, if you want to include ThreeJS In your .js or .vue files, simply type in:
import * as THREE from 'three'
if you want, install the wrapper hammerjs to vue, follow the link:
https://www.npmjs.com/package/vue2-hammer
otherwise, do you need include the lib on the index.html, but a don't recommend.
ps: I would like do comment, but i don't have reputation.
Per the tippy.js git hub page I installed it with npm:
npm i tippy.js
Now I have a .js source file that's used for a webpack 4 html page that gets output to my ./dist folder, but I don't know how to import it; my other option is just to include it from the CDN but that doesn't seem very webpackesque
Also I'm using ES6 via babel-loader stage-0; so how exactly do I import that in so it's included with my bundle?
Shouldn't the CSS for tippy need to be imported as well?
Okay I found it here
import tippy from 'tippy.js'
and for CSS it's
import 'tippy.js/dist/tippy.css'
I don't want to use the react-bootstrap components,
I simply want to use Bootstrap on a React site.
I installed Bootstrap with npm : npm install bootstrap
and added it in my package.json dependencies :
"dependencies": {
[...],
"bootstrap": "^3.3.5"
}
and added it to my App.js file : import bootstrap from 'bootstrap';
However, the style is not applied and it looks like a website from 1995.
I also tried to add import bootstrap from 'bootstrap'; to my index.js without success.
What am I missing?
You also need to add the CSS to your page. You can either:
copy bootstrap.css from node_modules/bootstrap/dist/css/, put it in a public folder, and add it to your page normally (which isn't ideal if you ever plan to upgrade bootstrap)
or
if you're using something like webpack or gulp, you can just add bootstrap.css to your CSS bundle