I'm creating a unit test for a Vue component (inside a Nuxt app) like this:
<template>
<BaseHeader>
...
<LazyHydrate when-visible>
<LazyNewsletter />
</LazyHydrate>
</BaseHeader>
</template>
<script>
import BaseHeader from '#acme/components/BaseHeader/BaseHeader.vue'
import Newsletter from '#/components/Newsletter/Newsletter.vue'
export default {
name: 'TheHeader',
components: {
BaseHeader,
Newsletter
},
}
</script>
but I'm getting this warning in the console when running the test:
console.error
[Vue warn]: Unknown custom element: <LazyHydrate> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
LazyHydrate is a component from the package vue-lazy-hydration and it's already configured in the nuxt app.
Does anyone know what's happening here?
T.I.A.
I tried to use mount instead of shallowMount, but I get the same error.
Related
I want to write a directive in nuxts.js and want to add it via the plugins array in the nuxt.config file, but then my directive doesn't get resolved...
//plugins/myGlobalDirective.js
import Vue from 'vue'
Vue.directive('my-global-directive', {
inserted: function(el) {
console.log('my-global-directive')
}
})
//nuxt.config.js
plugins: [
'~plugins/myGlobalDirective.js'
],
//component
<template>
<p v-my-global-directive>lala</p>
</template>
that doesn't work.
But if I import it directly in the component it works ( I can also remove it from the plugins array)
//component
<template>
<p v-my-global-directive>lala</p>
</template>
<script>
import '~/plugins/myGlobalDirective.js'
</script>
What I'm doing wrong?
Problem solved
I have to restart the server if I change something in the nuxt.config file...
And it works with or without the the '/'
Okay, I'm currently stuck. I'm trying to implement CucumberJS and Puppeteer on an EmberJS solution.
I've got a emberjs button:
{{#ao-button data-test-button-view-related-payments-requests="true" isFluid=true size="large" type="primary" action=(route-action 'viewRelatedRequests' upload)}}<span class="ao-button__label" >View Related Payment Requests</span>{{/ao-button}}
and I included an HTML attribute: data-test-button-view-related-payments-requests="true"
When I attempt tp select it:
await this.page.click('[data-test-button-view-related-payments-requests="true"]');
I get:
Error: No node found for selector: [data-test-button-view-related-payments-requests="true"]
What am I doing wrong?
Custom data-* attributes must be enabled in order to pass them to a component. This is done by extending the component and then adding attribute bindings. See this section of the Guides. Example:
import LinkComponent from '#ember/routing/link-component';
export default LinkComponent.extend({
attributeBindings: ['data-toggle', 'lang']
});
I am being faced with the same problem on
How to programatically add component via controller action
However since I am using ember cli, I am unable to do so.
Here is my source code
import Ember from "ember";
export default Ember.Component.extend({
actions : {
remove : function(){
this.remove();
},
add : function()
{
Ember.AuthorNameComponent.create().appendTo($('#authors'));
}
},
});
When I try to run this code, I get undefined error. Also name of component is author-name.
Any help, how can I create component via programmatically?
You need to import the component, then you don't need the Ember Global.
import AuthorNameComponent from '../components/author-name-component'
Another way is to have an array of items and base the list of AuthorNameComponent from that.
{{#each items as |item|}}
{{author-name name=item.name}}
{{/each}}
I'm trying to change the roolURL in an Ember CLI app. This is easy in a basic Ember app:
App.Router.reopen({
rootURL: '/blog/'
});
Doing this in an Ember CLI app throws the following exception:
Uncaught TypeError: Cannot read property 'reopen' of undefined
The reason why I'd like to do this is that I'm going to have multiple Ember CLI apps inside of a rails app. The URLs will look something like this:
/ --> rails
/foo --> rails
/api --> rails
/admin --> Ember CLI
/blog --> Ember CLI
You'd want to update your config/environment.js as follows:
module.exports = function(environment) {
var ENV = {
environment: environment,
baseURL: '/blog/'
see http://www.ember-cli.com/#deployments for environment specific configurations.
I am trying to verify that the session object is available in my ember app. I've used ember-cli to generate the app and I've followed the ember-auth installation instructions. The instructions say "add the Ember CLI Addon to your project and Ember Simple Auth will setup itself".
npm install --save-dev ember-cli-simple-auth
Unfortunately when I am in my controller there is no session object.
I have also tried loading the initalizer in my app.js but I have yet to figure out how to access App.session from my controller. I think ember-cli has namespaced things differently.
//app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'ember-test', // TODO: loaded via config
Resolver: Resolver
});
loadInitializers(App, 'ember-test');
loadInitializers(App, 'simple-auth');
export default App;
//about.js
import Ember from 'ember';
export default Ember.Controller.extend({
derp: 'derpvalue',
actions: {
test : function(){
console.log("In test");
console.log(session);
console.log(App.session);
debugger;
}
}
});
Here are recent ember-cli-simple-auth setup instructions from the author
You shouldn't have to manually set up an initializer. And I can verify that the author's instructions should give you this.session in your controller.
Copying the author's instructions:
Installing Ember Simple Auth in an ember-cli project is really easy now. All you have to do is install the ember-cli addon from npm:
npm install --save-dev ember-cli-simple-auth
This will install Ember Simple Auth’s AMD distribution into the project, register the initializer so Ember Simple Auth automatically sets itself up and add itself as a dependency to the project’s package.json.
You can add a login route and login/logout links to verify it all actually works:
// app/router.js
…
Router.map(function() {
this.route('login');
});
…
// app/templates/application.hbs
…
{{#if session.isAuthenticated}}
<a {{ action 'invalidateSession' }}>Logout</a>
{{else}}
{{#link-to 'login'}}Login{{/link-to}}
{{/if}}
…
Also implement the ApplicationRouteMixin in the project’s application route:
// app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin);
Setting up authentication
To actually give the user the option to login, we need to add an authentication package for Ember Simple Auth. Let’s assume you have an OAuth 2.0 compatible server running at http://localhost:3000. To use that, install the OAuth 2.0 extension library which again is as easy as installing the package from npm:
npm install --save-dev ember-cli-simple-auth-oauth2
Like the ember-cli-simple-auth package this will setup itself so that nothing else has to be done in order to use the OAuth 2.0 functionality.
The OAuth 2.0 authentication mechanism needs a login form, so let’s create that:
// app/templates/login.hbs
<form {{action 'authenticate' on='submit'}}>
<label for="identification">Login</label>
{{input id='identification' placeholder='Enter Login' value=identification}}
<label for="password">Password</label>
{{input id='password' placeholder='Enter Password' type='password' value=password}}
<button type="submit">Login</button>
</form>
Then implement the LoginControllerMixin in the login controller and make that use the OAuth 2.0 authenticator to perform the actual authentication:
// app/controllers/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'simple-auth-authenticator:oauth2-password-grant'
});
As the OAuth 2.0 authenticator would by default use the same domain and port to send the authentication requests to that the Ember.js is loaded from you need to configure it to use http://localhost:3000 instead:
// config/environment.js
if (environment === 'development') {
…
ENV['simple-auth-oauth2'] = {
serverTokenEndpoint: 'http://localhost:3000/token'
}
…
As ember-cli adds all configuration to the global ENV variable (e.g. in this case MyAuthAppENV) which Ember Simple Auth cannot use as it doesn’t know it’s name, you need to copy that to window.ENV so Ember Simple Auth can use it:
// app/initializers/simple-auth-config.js
export default {
name: 'simple-auth-config',
before: 'simple-auth',
initialize: function() {
window.ENV = MyAuthAppENV;
}
};
Ember Simple Auth is awesome!