I'm trying to create a simple app to learn Laravel with VueJS. I created a JetStream sample app with InertiaJS but seem to have gotten stuck on something that is probably just related to a fundamental misunderstanding.
I have added a link to my navigation section, which renders a Vue component, which uses GridJS to display a list of all users. Now when I check in Chrome's DevTools Network tab, the request seems to route correctly, but the template in the page doesn't get added to the DOM. I have some JS in the same document which gets a link hook, and it then uses that to look up a querySelector, but doesn't find it. The link is in the same file but within a template block, so the template block contents are obviously not being added to the DOM.
Here is my route:
Route::get('/user/view', function() {
return Inertia::render('UserList');
})->name('user.view');
Here is my Vue component (just relevant part):
<template>
<div class="row">
<div class="col-lg-12">
<div js-hook-url="{{ route('user/view') }}" js-hook-table-users></div>
</div>
</div>
</template>
<script>
import { Grid, html } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
const USER_TABLE = '[js-hook-table-users]'
const TABLE_USERS_WRAPPER = document.querySelector(USER_TABLE);
const TABLE_USERS_URL = TABLE_USERS_WRAPPER.getAttribute('js-hook-url');
So the error happens on the last line there, because the node does not exist in the DOM and so is not picked up by the querySelector, so getAttribute gets called on null. Again, I'm sure this is a fundamental issue being new to Laravel and Vue. TIA
I have started a new app using React and react-bootstrap. There is only one component outside the App.js file. The contents:
import React from 'react';
import { Accordion, Button, Card } from 'react-bootstrap';
const accordionDemo = (props) => (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Card one
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Body of Card One.</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Card two
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Body of Card Two.</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
export default accordionDemo;
This results in a button and text displaying for each card in the code. The buttons don't do anything except create a warning in the console: index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.
A warning should break, right?
is this a react-bootstrap wide problem? Or perhaps Boottstrap?
Do I need to manually import some CSS? I thought The react components would come with that styling already.
So I was foolish. I did not have the bootstrap scss imported into my main scss file. And... that was everything.
The answer, therefore, is yes, you DO need to import CSS separately when using react-bootstrap -- as per https://react-bootstrap.github.io/getting-started/introduction/
I have installed React using create-react-app. It installed fine, but I am trying to load an image in one of my components (Header.js, file path: src/components/common/Header.js) but it's not loading. Here is my code:
import React from 'react';
export default () => {
var logo1 = (
<img
//src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
src={'/src/images/logo.png'}
alt="Canvas Logo"
/>
);
return (
<div id="header-wrap">
<div className="container clearfix">
<div id="primary-menu-trigger">
<i className="icon-reorder"></i>
</div>
<div id="logo">
<a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
<a href="/" className="retina-logo" data-dark-logo='/images/logo-dark#2x.png'>
<img src='/var/www/html/react-demo/src/images/logo#2x.png' alt="Canvas Logo" />
</a>
</div>
</div>
</div>
);
}
If I write the image path as src={require('./src/images/logo.png')} in my logo1 variable, it gives the error:
Failed to compile.
Error in ./src/Components/common/Header.js
Module not found: ./src/images/logo.png in /var/www/html/wistful/src/Components/common
Please help me solve this. Let me know what I am doing wrong here.
If you have questions about creating React App I encourage you to read its User Guide.
It answers this and many other questions you may have.
Specifically, to include a local image you have two options:
Use imports:
// Assuming logo.png is in the same folder as JS file
import logo from './logo.png';
// ...later
<img src={logo} alt="logo" />
This approach is great because all assets are handled by the build system and will get filenames with hashes in the production build. You’ll also get an error if the file is moved or deleted.
The downside is it can get cumbersome if you have hundreds of images because you can’t have arbitrary import paths.
Use the public folder:
// Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
This approach is generally not recommended, but it is great if you have hundreds of images and importing them one by one is too much hassle. The downside is that you have to think about cache busting and watch out for moved or deleted files yourself.
If you want load image with a local relative URL as you are doing. React project has a default public folder. You should put your images folder inside. It will work.
In React or any Javascript modules that internally use Webpack, if the src attribute value of img is given as a path in string format as given below
e.g. <img src={'/src/images/logo.png'} /> or <img src='/src/images/logo.png' />
then during build, the final HTML page built contains src='/src/images/logo.png'. This path is not read during build time, but is read during rendering in browser. At the rendering time, if the logo.png is not found in the /src/images directory, then the image would not render. If you open the console in browser, you can see the 404 error for the image. I believe you meant to use ./src directory instead of /src directory. In that case, the development directory ./src is not available to the browser. When the page is loaded in browser only the files in the 'public' directory are available to the browser. So, the relative path ./src is assumed to be public/src directory and if the logo.png is not found in public/src/images/ directory, it would not render the image.
So, the solution for this problem is either to put your image in the public directory and reference the relative path from public directory or use import or require keywords in React or any Javascript module to inform the Webpack to read this path during build phase and include the image in the final build output. The details of both these methods has been elaborated by Dan Abramov in his answer, please refer to it or use the link: https://create-react-app.dev/docs/adding-images-fonts-and-files/
There are lot of good answers here and more expert opinions than myself. But I will just share my experience and what worked for me.
I was irritated by the fact that there is so much go around just to have a simple inclusion of images. Hence here is what I did-
Create a seperate component (file) myimages.jsx
import image1 from "../img/someimage.png";
import image2 from "../img/otherimage.png";
const ImageData=[image1,image2,image3]
export default ImageData;
I then just imported this ImageData component in the file (component) I as using the images. This way I turned a cpmponent into a 'folder' to get all my images.
Like I said, not an expert but this resolved my frustration with lack of importing images quickly in React.
You have diferent ways to achieve this, here is an example:
import myimage from './...' // wherever is it.
in your img tag just put this into src:
<img src={myimage}...>
You can also check official docs here: https://facebook.github.io/react-native/docs/image.html
In order to load local images to your React.js application, you need to add require parameter in media sections like or Image tags, as below:
image={require('./../uploads/temp.jpg')}
In React.js latest version v17.0.1,
we can not require the local image we have to import it.
like we use to do before = require('../../src/Assets/images/fruits.png');
Now we have to import it like =
import fruits from '../../src/Assets/images/fruits.png';
Before React V17.0.1 we can use require(../) and it is working fine.
Instead of use img src="", try to create a div and set background-image as the image you want.
Right now it's working for me.
example:
App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div>
<div className="myImage"> </div>
</div>
);
}
}
export default App;
App.css
.myImage {
width: 60px;
height: 60px;
background-image: url("./icons/add-circle.png");
background-repeat: no-repeat;
background-size: 100%;
}
Best approach is to import image in js file and use it. Adding images in public folder have some downside:
Files inside public folder not get minified or post-processed,
You can't use hashed name (need to set in webpack config) for images , if you do then you have to change names again and again,
Can't find files at runtime (compilation), result in 404 error at client side.
First, you need to create a folder in src directory then put images you want.
Create a folder structure like
src->images->linechart.png
then import these images in JSX file
import linechart from './../../images/linechart.png';
then you need use in images src like below.
<img src={linechart} alt="piechart" height="400px" width="400px"></img>
We don't need base64, just give your image path and dimensions as shown below.
import Logo from './Logo.png' //local path
var doc = new jsPDF("p", "mm", "a4");
var img = new Image();
img.src = Logo;
doc.addImage(img, 'png', 10, 78, 12, 15)
everybody.
I am using the following:
angular: 1.6.1,
angular-material: 1.1.3,
angular-ui-router: 1.0.0-rc.1
All my views are built using components and I am routing them with the UI-Router 1.x component syntax:
$stateProvider
.state('main', {
url: '/main',
component: 'main',
})
For the sake of completeness, my components are laid out as follows:
angular
.module('app.main')
.component('main', {
templateUrl: '/modules/main/main.html',
controller: MainCtrl,
})
MainCtrl.$inject = [];
function MainCtrl (){
}
My index.html is as follows:
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout="column" flex ui-view></div>
My view for the main component is irrelevant at this point as the problem starts here. If, for example, my view for main.html is as follows:
<div layout="row" flex>
Content
</div>
The div will NOT flex. If, however, it is simply added in place of the ui-view in the parent, it will flex as normal.
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout-align="column" flex>
Content (THIS WORKS FINE!)
</div>
Both contain the same attributes in the inspector apart from the usual differences in using ui-view.
This also seems to be causing problems with md-content, which will only scroll if it is the element in the parent that contains the ui-view. Any nested md-contents will not scroll.
I have also tried using the original ui-router way of routing to controllers and templates which was the norm before the .component syntax.
There is a similar problem listed here:
Angular Material layout breaks when using UI-Router
It seems that this gentleman's solution was to abandon UI-Router and use ng-route. I really don't want to move away from UI-Router and am considering completely abandoning Angular-Material but would really prefer to avoid that.
Can anybody please help out with this?
I am working on a Laravel 5.2 project with Laravel Spark (which still in beta as at time of writing) and trying to add some Vuejs functionality using the default layouts and views.
My first attempt failed because I simply tried to create a new div within the home view and bind my Vue code to that div. Here is the div:
<div id="my-stuff">
<p>#{{ test }}</p>
</div>
And here is the corresponding JS code:
new Vue( {
el: '#my-stuff',
data: {
test: 'This is a test'
}
});
What I expected to see were the words "This is a test" appear within that div on the home screen, but of course nothing appeared because, as mentioned, Vue gets bound to a div immediately after the body tag (well, I'm assuming that's why anyway).
I think the solution to my problem is to use Vue components, which themselves look fairly straightforward, but I have no idea where to put my code, how to integrate my code with the Gulp process, which Spark file I need to modify (if any?) to register my component and how to ensure that my component gets registered before the Vue instance gets created.
Any help would be much appreciated.
Addendum 1
To reproduce the exact same set-up as I'm using, one would need to install a fresh copy of Laravel 5.2, then use the spark installer to add the spark stuff, then add app.js containing the code below to the public folder, add the corresponding div anywhere in the home view and add a script tag to include app.js right below the script tag that imports the main javascript file produced by gulp.
Whilst it is impractical to reproduce that entire setup in a fiddle, I think the following fiddle illustrates the essence of the problem:
https://jsfiddle.net/5oLLte2e/
From memory you have the same limitation in AngularJS. It is completely reasonable to me why this wouldn't work and the solution in Vuejs is most likely to use components, but the challenge in this situation is knowing how to bundle the component and where to save it in order to integrate it with the gulp config, or if that is even necessary.
Vuejs Components
If you want to have more than one vue instance the short answer is: yes, you need components.
<div id="main-app">
<p>{{ mainMessage }}</p>
<my-app>
<p>Some composable content</p>
</my-app>
</div>
And the scripts will have to be loaded components first:
Vue.component('my-app', {
template: '<div>{{myMessage}}<br/><slot></slot></div>',
data: function() {
return {
myMessage: 'This is my message'
}
}
});
new Vue( {
el: '#main-app',
data: {
mainMessage: 'This is the main module'
}
});
The output will be:
This is the main module
This is my message
Some composable content
Here is the fiddle: Components with Vue
Remember that you can always put the template in the page using a unique id or, more idiomatically using something like:
<script type="x/template" id="my-app">
Your template here
{{ your component variables }}
</script>
Laravel Spark Integration
The steps to adding a component within a Sparkified Laravel application are as follows:
(1) Add the placeholder HTML with the custom tag anywhere on the page, even if a surrounding div has already been Vue-ified. The HTML with the custom component might look like this:
<div id="example">
<my-component></my-component>
</div>
(2) Implement the Vue component and save the JavaScript file in resources/assets/js. By way of example, we might save the following code as my-component.js:
var MyComponent = Vue.extend({
data: function() {
return { message: 'This is a test' }
},
template: '{{ message }}'
})
Vue.component('my-component', MyComponent)
new Vue({
el: '#example'
})
(3) Add one require statement (the second line below) to the code in resources/assets/js/app.js so that the file looks like this:
require('laravel-spark/core/bootstrap');
require('./my-component.js'); // This is the key!
new Vue(require('laravel-spark'));
Note that it is super-important to include the leading ./ in front of the filename, otherwise Browserify will assume it is looking for a npm module instead of a raw file and will fail.
(4) Run gulp and once it has finished, refresh the page. Gulp will call Browserify, which processes resources/assets/js/app.js, which now includes our custom JavaScript to be processed and included in the final public/js/app.js file.
If you carry out these steps on a clean Laravel installation that has had the Spark installer treatment (I made my mods to home.blade.php), you should see the sample text appear on the page.