I'm trying to setup Agora for live streaming in my nuxtjs app. But it gives an error saying plugin not recognized in the console and I can't seem to get past this issue. Did anyone encounter similar issues? My nuxt version is "nuxt": "^2.15.8" and agora "agora-rtc-sdk-ng": "^4.13.0". The error I'm encountering now is:
I've imported the plugin in agora.js file in my plugins folder.
import Vue from "vue";
import { AgoraRTC } from 'agora-rtc-sdk-ng';
Vue.use(AgoraRTC);
And the nuxt config.
{
src: "~/plugins/agora.js",
ssr: false,
mode: 'client'
}
EDIT:
If I update the agora.js file with this code:
import Vue from "vue";
import AgoraRTC from 'agora-rtc-sdk-ng';
Vue.use(AgoraRTC);
I get the error: ReferenceError: AgoraRTC is not defined.
Am I missing something? Also it would be a great help if anyone could give reference to a demo build with nuxt.
After finding no solution to this, I contacted the support team of Agora. They had been a great help!
The problem was with Vue.use(AgoraRTC). For some reason this wasn't working. So I had to inject it in the app.
First I replaced these sections form plugins/agora.js file:
import Vue from "vue";
import AgoraRTC from 'agora-rtc-sdk-ng';
Vue.use(AgoraRTC);
and nuxt.config.js file:
{
src: "~/plugins/agora.js",
ssr: false,
mode: 'client'
}
With this:
import AgoraRTC from "agora-rtc-sdk-ng"
export default ({app}, inject) => {
inject("AgoraRTC", AgoraRTC)
}
and:
{
src: "~/plugins/agora.js",
mode: 'client'
}
Finally the AgoraRTC variable is accessible in the components as this.$AgoraRTC.
Reference to inject in $root from Nuxt docs
Thanks to the support team of Agora
Related
hello everyone for a realtime laravel application i want to use axios . in app.js file in resources directory I required axios file here is all app.js file codes :
require('./bootstrap');
window._ = require('lodash');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
the problem is when I want to use axios in frontend it errors that axios is not defined so what the problem ? can someone help me please ...
i realized that in my layout template I forgot delete defer from app.js script and it cause in entire project Axios and Echo libraries not be recognized so after deleted "defer" from script tag it works like a charm
I'm implementing Amplify Flutter and want to connect it to our own custom GraphQL endpoint (i.e. non-AppSync). I am however having trouble getting it to work. The official documentation is not super-clear on this (at least not for those of us who are completely new to Amplify). What I have done:
In pubspec.yaml, I’ve added and installed the amplify_api package.
In main.dart, I’ve updated _configureAmplify() to add the AmplifyAPI() plugin.
In amplifyconfiguration.dart, I have manually added the following snippet:
"api": {
"plugins": {
"awsAPIPlugin": {
"xxxxxAPI": {
"endpointType": "GraphQL",
"endpoint": "http://xxxxxxxx.eba-fmuh2afu.eu-north-1.elasticbeanstalk.com/query",
"region": "[REGION]",
"authorizationType": "AMAZON_COGNITO_USER_POOLS"
}
}
}
}
But I keep getting the error "There is no API configured for this plugin with matching endpoint type." What am I doing wrong? (Note: I presume that I don't have to add any "region" value if I'm pointing to our own custom GraphQL endpoint).
I was able to fix this issue by closing the app and uninstalling it, then run again and log in to start fetching API
I am looking for some best practices for publishing and developing nuxt plugins. I would like to write a plugin which gives our web applications the possibility to request oauth tokens from everywhere. I have written this plugin localy in my project and it works. Now my target is to move the code to a seperate plugin project and upload it to npm so every one in my company might use it easily. Are there any guides how to setup a nuxt plugin project? I found several guides for creating vue-plugins but the structure of them are a bit different to nuxt. I do not have a install method. Because my plugin simply wraps vuex store methods defined in oAuthStore.js as global methods, which can be used when I register my plugin in nuxt.config.js.
Vue plugins seems to work a bit different.
I upload a vue-plugin with an install method. When I try to import it and run my application on dev server (npm run dev) i always get the error message:
This dependency was not found: * my-plugin in ./plugins/vuex-persisted.js friendly-errors 16:55:24
friendly-errors 16:55:24
To install it, you can run: npm install --save my-plugin
My plugin has been uploaded to npm correctly and I have used it by executing npm install --save my-plugin so it has an entry on dependency list in package.json.
When I try to npm-link my-plugin I get the same error. This is the only way I know for rapid prototyping because I do not want a npm publish every time I want to test something. Does everyone know a way for a better developing workflow for working on nuxt plugins?
Thanks for any help.
Best regards
Moritz
/** oAuthPlugin.js **/
import oAuthStore from './oAuthStore.js'
import Cookies from 'js-cookie'
import createPersistedState from 'vuex-persistedstate'
export default ({store, isHMR, app}, inject) => {
app.store.registerModule('oAuth', oAuthStore );
var me = app;
inject('getOAuthCredentials', () => {
var data = {};
if(app.$store) {
var data = app.$store.getters["oAuth/getAuthCredentials"];
}
return data;
});
inject('requestOAuthCredentials', (data) => {
if(me.store) {
me.store.commit("oAuth/requestOAuthCredentials", data);
}
});
if (isHMR) return
// add persisted state as a vue mounted mixin
if (!app.mixins) {
app.mixins = []
}
app.mixins.push({mounted () {
createPersistedState({
key: 'vuex-persisted',
paths: ['oAuth'],
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, {expires: 3}),
removeItem: key => Cookies.remove(key)
}
})(store);
}});
}
/** nuxt.config.js **/
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~/plugins/vuex-persisted', ssr: false },
{ src: '~/plugins/oAuthPlugin.js' }
],
I have a simple akka Http Server:
import akka.http.scaladsl.model.{ContentTypes, HttpEntity}
import akka.http.scaladsl.server.HttpApp
import akka.http.scaladsl.server.Directives._
import akka.http.scaladsl.settings.ServerSettings
import com.typesafe.config.ConfigFactory
object MinimalHttpServer extends HttpApp {
def route =
pathPrefix("v1") {
path("subscribe" / Segment) { id =>
get {
complete(HttpEntity(ContentTypes.`text/html(UTF-8)`, s"<h1>Hello $id from Akka Http!</h1>"))
} ~
post {
entity(as[String]) { entity =>
complete(HttpEntity(ContentTypes.`text/html(UTF-8)`, s"<b>Thanks $id for posting your message <i>$entity</i></b>"))
}
}
}
}
}
object MinimalHttpServerApplication extends App {
MinimalHttpServer.startServer("localhost", 8088, ServerSettings(ConfigFactory.load))
}
I use Sbt native Packager to build an universal zip. When I deploy my application to Aws Elastic Beanstalk, I receive this error:
[Instance: i-0a846978718d54d76] Command failed on instance. Return code: 1 Output: (TRUNCATED)...xml_2.11-1.0.5.jar Unable to launch application as the source bundle does not contain either a file named application.jar or a Procfile. Unable to launch application as the source bundle does not contain either a file named application.jar or a Procfile. Hook /opt/elasticbeanstalk/hooks/appdeploy/pre/01_configure_application.sh failed. For more detail, check /var/log/eb-activity.log using console or EB CLI.
Any Ideas? Thank You!
It appears AWS Elastic Beanstalk expects your .zip to contain either a file named application.jar or a Procfile, and the zip created by sbt-native-packager does not look like that.
It appears sbt-native-packager does not have support for the format Elastic Beanstalk expects, though GitHub issue 632 shows some work done in that direction.
I'm attempting use react-router in my brunch/babel setup. In my app.js I have:
import React from "react"
import ReactDOM from "react-dom"
import { Router, Route, Link } from "react-router"
This however gives me:
Uncaught Error: Cannot find module "history/lib/createHashHistory" from "react-router/Router"
When looking at the referenced line I see:
var _historyLibCreateHashHistory = require('history/lib/createHashHistory');
When inspecting the app.js that's generated via brunch I see:
require.register('history/createBrowserHistory', function(exports,req,module) {
...
});
How do I go about fixing this so that createBrowserHistory gets imported properly?
The module history is listed as a peer dependency by react-router, which means that you need to install it yourself through the command npm install history --save.