# What I want to ? When the send_message() function of the vue code(for webview) is executed, print messages sent by vue in Flutter App

# Problem? in vue project (for Webview) error occured 'WebViewBridge' is not defined no-undef

(cf, "WebViewBridge" is JavascriptInterface name for Android)

# What I tried? 1st. Vue project (main.js)

import Vue from 'vue'
import App from './App.vue'
import routes from './router.js'
import VueRouter from 'vue-router'

// ★for Global js import ★
import message from 'message'; 

Vue.config.productionTip = false

// ★Register a function that sends a message to Native as a plug-in.★
Vue.use(message);

Vue.use(VueRouter)  


// ★Add the function to the window object.★
window.sendMessage = message;

const router = new VueRouter({
  mode: 'history',  
  routes // short for routes: routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Vue project(sendmessage.vue)

  methods: {

    send_message(message){
     WebViewBridge.showMessage(message)
    }

2nd. flutter project (main.dart)

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(

  MaterialApp(
    title: 'Navigator',
    initialRoute: '/my',
    routes: {
      "/my":  (context) => MyApp(),
    },

  ),

);

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: Text("test")
        // ★Here !★
        body: WebView(
          initialUrl: "http://****:8080/",
          javascriptMode: JavascriptMode.unrestricted,

          //A named channel for receiving messaged from JavaScript code running inside a web view
          javascriptChannels: <JavascriptChannel>{
            _webToApp(context),
          }
        )
    );
  }
}

JavascriptChannel _webToApp(BuildContext context) {
  return JavascriptChannel(
      name: 'WebViewBridge', // for Android
      // A callback that's invoked when a message is received through the channel.
      onMessageReceived: (JavascriptMessage message) {
        showAlertDialog(message.message, context);

        //}
      });
}