I am trying to install mdbootstrap vue into a Laravel 5.7 project, but i realy don't understand how i suppose to do it.
I did everything like in here but anyway it doesn't work.
On rendering I got such vue error :
Unknown custom element: <mdb-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Code from view:
<mdb-btn color="elegant">Elegant</mdb-btn>
please follow this steps from this answer https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/issues/1#issuecomment-372342369 :
insert this in your main.js file:
import 'mdbvue/build/css/mdb.css'
import 'mdbvue/src/components/Waves.css'
then in your component import the components that you need:
import { Container, Row, Column, Btn, Card } from 'mdbvue';
for example:
<template>
<mdb-btn-fixed #mouseenter.native="hover" #mouseleave.native="hoverOut"
icon="pencil" size="lg" :bottom="30" :right="25">
<mdb-btn-fixed-item :show="show" color="red" icon="star"/>
<mdb-btn-fixed-item :show="show" color="yellow" icon="user"/>
<mdb-btn-fixed-item :show="show" color="green" icon="envelope"/>
<mdb-btn-fixed-item :show="show" color="blue" icon="shopping-cart"/>
</mdb-btn-fixed>
</template>
<script>
import { mdbBtn, mdbBtnFixed, mdbBtnFixedItem } from 'mdbvue';
export default {
data() {
return {
show: false
};
},
name: 'ButtonPage',
components: {
mdbBtn,
mdbBtnFixed,
mdbBtnFixedItem
},
};
You have a lot of examples of usage here at the bottom: https://mdbootstrap.com/docs/vue/components/buttons/
Related
Hello Guys I am new to Angular and learning the things using the following tutorial link. For some reason the canDeactivate route guard seem to not work. Any help would be appreciated as I tried checking many things but none worked. I have the latest angular CLI and there are not errors in my code and for some reason the canDeactivate function is not at all called during the route change.
I am applying the function on the CreateEmployee route so when I fill the form for createEmployee and I try to navigate to different route then it should kick in.
create-employee-component.html: In this, I have few form elements
<form #employeeForm = "ngForm" (ngSubmit)="saveEmployee()" [ngClass]="{'was-validated': employeeForm.submitted}" novalidate>
create-employee-component.ts
import { Component, OnInit, ViewChild } from '#angular/core';
import { NgForm } from '#angular/forms';
import { Department } from '../models/department.model';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { Employee } from '../models/employee.model';
import { EmployeeService } from './employee.service';
import { Router } from '#angular/router';
#Component({
selector: 'app-create-employee',
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
#ViewChild('employeeForm') public createEmployeeForm: NgForm;
datePickerConfig: Partial<BsDatepickerConfig>;
previewPhoto = false;
create-employee-can-deactivate-guard.service.ts
import { Injectable } from '#angular/core';
import { CanDeactivate } from '#angular/router';
import { CreateEmployeeComponent } from './create-employee.component';
#Injectable()
export class CreateEmployeeCanDeactivateGuardService implements CanDeactivate<CreateEmployeeComponent>{
canDeactivate(component: CreateEmployeeComponent): boolean{
alert("HJEJJEJEJ");
if(component.createEmployeeForm.dirty)
{
return confirm('Are you sure you want to discard your changes?');
}
return true;
}
}
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ListEmployeesComponent } from './employees/list-employees.component';
import { CreateEmployeeComponent } from './employees/create-employee.component';
import { CreateEmployeeCanDeactivateGuardService } from './employees/create-employee-can-deactivate-guard.service';
const routes: Routes = [
{path: 'list', component: ListEmployeesComponent},
{
path:'create',
component: CreateEmployeeComponent,
canDeactivate: [CreateEmployeeCanDeactivateGuardService]
},
{path: '', redirectTo:'/list', pathMatch:'full'}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [CreateEmployeeCanDeactivateGuardService]
})
export class AppRoutingModule { }
I feel everything is correct as per some of the other answers I found on the StackOverflow. Please let me know what am I doing wrong here. I have also posted my code here.
I finally found out what was the issue. After some time spending on the research I found out that in the navbar previously I was using the href element with the anchor tag hence the canDeactivate guard was not kicking in. Now I changed it to [routerLink]="['/list']" and the canDeactivate started working correctly.
Posting the answer as it may be useful for someone who is looking for solution:
Previous Navbar with the anchor tag and href element:
<a class="nav-link" href="list">List <span class="sr-only">(current)</span></a>
Changed Navbar with the anchor tag and routerLink which is working fine with the canDeactivate:
<a class="nav-link" [routerLink]="['/list']">List <span class="sr-only">(current)</span></a>
If in case you are looking for the whole code please check the question where I have mentioned all the code chunks related to canDeactivate guard.
So I'm having issues when I use enzyme to test a component thats using css modules. Or should I say filename.module.scss
Whats happening when I do something like:
const wrapper = shallow(<MyComponent {...data}/>);
console.log('wrapper = ', wrapper.debug());
My debug works and shows my component structure with all my divs in there. The issue is none of my styles are getting added durning running tests. But when I run Gatsby develop the styles are getting added. So just to be clear only in test mode do I not see the styles added to my component!!!
MyComponent.js
import React, { Component } from 'react';
import styles from ‘./MyComponent.module.scss';
class MyComponent extends Component {
render() {
const {
name,
} = this.props;
return (
<React.Fragment>
<div className={styles.header}>
<div className={styles.name}>{name}</div>
</div>
</React.Fragment>
);
}
}
My debug is showing all styles as undefined which is driving me crazy as I can't test based on style name if a div exists.
Here is my package setup for jest.
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/.jest/styleMock.js"
},
"setupFiles": [
"<rootDir>/.jest/setupFiles.js"
]
}
For anyone else running into this issue.
npm install identity-obj-proxy
then add this to your package.json
"jest": {
"moduleNameMapper": {
".+\\.(css|styl|sass|scss)$": "identity-obj-proxy"
},
"setupFiles": [
"<rootDir>/.jest/setupFiles.js"
]
}
Hope this helps someone.
I want to import a React component from a jsx file in a template and render it in the template with ReactDOM. Later in production I would only want to ship react and all the dependencies of the component only when a site is loaded that has that component.
I have created a React component like this:
editor.jsx
import * as React from "react";
import {Editor} from "draft-js-plugins-editor";
const plugins = [];
export class EditorComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
}
onChange(editorState) {
this.setState({
editorState,
});
}
render() {
return (<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>);
}
}
http://www.phoenixframework.org/docs/static-assets suggests the require syntax for accessing module exports. So I added the following to my template <script>const editor = require("web/static/js/editor").EditorComponent</script>. This does not work though, because the browser cannot interpret require (or brunch does not pick it up).
I configured brunch like so:
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/],
presets: ["es2015","react"]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js/editor.jsx": ["web/static/js/editor"]
}
},
I am a bit lost here. How can this be done?
One idea that pops to mind is to create a JS file and import it in the template you want with a <script> tag. In the same template create an empty <div id=editor>. Then, in the JS file import React and ReactDOM and the component you want and use something like this:
ReactDOM.render(
<Editor/>,
document.getElementById("editor")
)
However, I'm not sure I understand your problem correctly.
I'm having trouble getting a simple image to show up in a simple app using Webpack and React.
I've read this thru and tried a few different ways, but keep getting various errors, or at best sometimes no errors, but also no image displaying.
Here is my React component:
import React from 'react';
import styles from '../css/main.css';
import Menu from './Menu';
const logo = require('./images/PIVX_Planet_1a_239x83.png');
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {test: 'foo'};
}
render() {
return (
<div>
<div id='container'></div>
<div className={styles.logo}>
<img src={logo}/>
</div>
<div>
<Menu/>
</div>
</div>
);
}
}
Here is my webpack config:
...
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["react", "es2015", "stage-0", "react-hmre"]
}
}, {
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
}, {
test: /\.json?$/,
loader: 'json'
}, {
test: /\.css$/,
loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}]
}
...
With this, get error from webpack in console:
ERROR in ./app/components/App.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./images/PIVX_Planet_1a_239x83.png in /Users/mac/_DEV/_LAB/PIVX/PIVX-Planet-2/app/components
# ./app/components/App.js 67:11-56
I've also tried using babel-plugin-transform-react-jsx-img-import
(https://www.npmjs.com/package/babel-plugin-transform-react-jsx-img-import)
And then just use:
<div className={styles.logo}>
<img src="./images/PIVX_Planet_1a_239x83.png"/>
</div>
In that case, there are no errors, but the image show up broken.
I've tried changing the relative path to the image with all these combinations.
Directory structure:
app
components
App.js
images
PIVX_Planet_1a_239x83.png
index.html
...
Any insights?
As per your directory structure the path that you need to use is
const logo = require('../images/PIVX_Planet_1a_239x83.png');
since images is under app directory and not under components from where you are trying to get the image location
Also make sure all your loaders are properly installed
you can also try let as:
let logo = require('../images/PIVX_Planet_1a_239x83.png');
Always use let as much as possible to avoid the scope monster
The problem I was having was using
import logo from './images/PIVX_Planet_1a_239x83.png'
instead of
const logo = require('./images/PIVX_Planet_1a_239x83.png');
in a typescript react app w/ a bespoke webpack config.
I have tried everything that you guys have suggested but nothing is working for me. when I put my code in and 'run dev' it come out with an error placeholder. I am using it in the app.js and would like my logo as a link to the home page or just show up at all, in this case I was attempting to just have it on the page.
import '../styles/globals.css'
import Link from 'next/link'
import bpdlogofull from '../public/bpdlogofull.png'
`function MyApp({ Component, pageProps }) {
return (
<div>
<nav className="border-b p-6">
<img src={bpdlogofull} alt='logo'className='flex justify-end'/>
<div className="flex mt-4">
<Link href="/" className="home-button">
I create a new test app
> ng new TestApp
Then I install the nativescript-ngx-magic
> npm i #wwwalkerrun/nativescript-ngx-magic --save
Then create a new app.component.tns.html
<ActionBar title="Magic!" icon="" class="action-bar">
</ActionBar>
<StackLayout class="p-20">
<Label text="NativeScript is Neat." class="h1 text-center"></Label>
</StackLayout>
Create a blank app.component.tns.css
Then change my app.component.ts so that it will work with the nativescript-ngx-magic:
import { Component } from '#wwwalkerrun/nativescript-ngx-magic';
#Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
}
now run the app
> npm run start.android
The app works
Then I create a custom control:
> ng g component custom
then again Create a blank custom.component.tns.css
create a new custom.component.tns.html
<Label text="My Custom Component" class="h1 text-center"></Label>
Change the custom.component.ts code:
import { Component } from '#wwwalkerrun/nativescript-ngx-magic';
#Component({
moduleId: module.id,
selector: 'app-custom',
templateUrl: 'custom.component.html',
styleUrls: ['custom.component.css']
})
export class CustomComponent {
}
and add this custom tag into my app.component.tns.html so now it looks like this:
<ActionBar title="Magic!" icon="" class="action-bar">
</ActionBar>
<StackLayout class="p-20">
<Label text="NativeScript is Neat." class="h1 text-center"></Label>
<app-custom></app-custom>
</StackLayout>
Then when I run the app again:
> npm run start.android
I expect to see my custom component, but the app just looks the same.
What am I missing?
If I add a custom component into the .html file, not the tns.html and run using ng serve, then the website shows the custom component correctly. Just not the app.
Is this even possible when using the nativescript-ngx-magic?
I found the reason.
The nativescript-ngx-magic command creates a nativescript directory, in here there is an app folder and in here another app folder. This inner app folder is a symbolic link to the app folder in the main src folder. But in the outer app folder there is a second app.module.ts file which is generated. This is where the NativeScriptModule is imported. When I created the custom control: > ng g component custom then this component was automatically registered in the app.module.ts within the inner app folder (shared on the symbolic link). But it was not registered in the app.module.ts which is for nativescript. This explains why the custom component was visible for the website but not for the app. I needed to register the custom component in this second app.module.ts in the declarations section, so this app.module.ts now looks like:
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { AppComponent } from './app/app.component';
import { CustomComponent } from "./app/custom/custom.component";
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule
],
declarations: [
AppComponent, CustomComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
Once I did this, then the custom component was shown in the app too.