it's correct you cannot use ApexPage.addMessage in LWC. But there are a few good replacements.
If you want only to display only error messages you can just throw AuraHandledException(message);
for your error messages.
// ApexClass.class
public class Controller {
@AuraEnabled
public static void someMethod() {
Boolean isError = true;
if (isError) {
throw new AuraHandledException('Error message');
}
}
}
<!-- component.html -->
<template>
<c-toast></c-toast>
<!-- Some other markup -->
</template>
// component.js
// ...
import someMethod from '@salesforce/apex/Controller.someMethod';
// ...
export default class Component extends LightningElement {
@wire(someMethod)
callSomeMethod({error, data}) {
if (data) {
// process results
} else if (error) {
// this.template.query() seems not valid for LWC use this.template.querySelector as below
//this.template.query('c-toast').show(error.message || error.body.message, 'error');
this.template.querySelector('c-toast').show(error.message || error.body.message, 'error');
}
}
}
For displaying messages you can use Custom Toast if you want. Can provide code if needed.
UPDATE
<!-- toast.html -->
<template>
<div class="toast toast_hide" style="height:4rem" data-id="toast">
<div class="slds-notify_container slds-is-relative">
<div class={notifyClasses} role="status">
<span class="slds-assistive-text">error</span>
<lightning-icon icon-name={iconName} alternative-text={type}></lightning-icon>
<div class="slds-notify__content">
<h2>{title}</h2>
<p>{message}</p>
</div>
<div class="slds-notify__close">
<lightning-button-icon icon-name="utility:close" alternative-text="Close"></lightning-button-icon>
</div>
</div>
</div>
</div>
</template>
//toast.js
import {LightningElement, api, track} from 'lwc';
export default class UmToast extends LightningElement {
@track
message;
@track
title;
@track
type;
@api
show(message, type) {
this.title = 'error';
this.message = message;
this.type = type || 'error';
const toast = this.template.querySelector('.toast');
toast.classList.toggle('toast_show');
toast.classList.toggle('toast_hide');
this.timer = setTimeout(() => {{
toast.classList.toggle('toast_show');
toast.classList.toggle('toast_hide');
}}, 3000);
}
get notifyClasses() {
return `slds-notify slds-notify_toast slds-theme_${this.type}`;
}
get iconName() {
return `utility:${this.type}`;
}
}
/* toast.css */
.toast {
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.toast_hide {
opacity: 0;
}
.toast_show {
opacity: 1;
}