how to Use Materialize js with vue-cli - vuejs2

I'm using vue-cli,
i have installed materialize using "npm install materialize-css"
then i required that in my main.js file
require("materialize-css/dist/css/materialize.css");
require("materialize-css/dist/js/materialize.js");
it doesn't loads my js file.
how to include materialize.js in vue-cli. can someone guide me on this.?

Related

Adding Amplitude to store module in Vue app with Nuxt

I have a Vue app with with Nuxt and I am instrumenting it with Amplitude. I have already installed nuxt-amplitude via npm and actually I can log in .vue modules using
this.$amplitude.getInstance().logEvent('event')
But now I want to log from a .js file in a vue store module but it doesnt work. Any idea?
I tried using
this.$amplitude.getInstance().logEvent('event')
this.$nuxt.$amplitude.getInstance().logEvent('event')
amplitude.getInstance().logEvent('event')

Vue nuxt js updated code refreshes when npm run dev

I am new to nuxt js. I have a template of nuxt js which I am working on. In router.js I added some new routes, that's working fine, but when I run my development server again npm run dev, the updated code is just removed. I see the old code there. And it only does for the .nuxt folder. Not for the vue components.
Can anyone suggest something? Thanks.
Nuxt uses a method called File system routing, with that routes.js file is automatically generated according to your configuration and pages created, that is why your changes get removed
If you have a specific requirement that need more customization you can extend the router config

How to use intersection observer polyfill with Vue cli 3?

How to use: https://github.com/w3c/IntersectionObserver/tree/master/polyfill
Should i load it in a webpack config - vue.config.js or should i load it in a .vue template using imports?
npm install intersection-observer
Add this line to the top of your entry file (such as main.js)
import 'intersection-observer/intersection-observer';
That's all.

Using bulma together with webpack

I have this really simple webpack projects in with I now want to also use bulma a css framework.
I installed the package via npm i bulma and tried to include it inside my app.js-file using the following snipped unsuccessfully:
import bulma from '~bulma/bulma.sass';
I also tried using a specific sass part, which also did not work:
import bulma from '~bulma/sass/base/_all';
Can you help me get this working or maybe point me in the right direction?
You need to update your webpack config file so the sass loader also processes sass files, not only scss files.
Change this line:
test: /\.scss$/, to test: /\.(sass|scss)$/

How to include a frontend script when using create-react-app

I'm trying to add the jquery module select2 to my react project which has been created by create-react-app.
I'm running
npm install --save select2
and can see that the dependency is correctly added to my package.json.
Then I add this to a global javascript-file outside my react-code:
$(function () {
$('select').select2();
});
This does not work as the select2 script is not included.
What am I doing wrong? Should I somehow run the jquery code inside my react code? Should I do something specific to include the select2 library?
This might be a very basic problem, but I'm confused how scripts are actually included when running under the framework of create-react-app.
After som more research I realize that I can do the following:
Run 'npm install --save jquery'. This will add jquery to package.json
Add this import statement to my component: 'import $ from 'jquery';'
Any comments or more correct solutions will still be appreciated.