I used Framework7 + Vue.js and where include this params:
showBarsOnPageScrollEnd: false
I include in app init. but don't work this
Framework7 documentation shows an example on how to include Navbar parameters (not Vue specific):
// if you use it on navbars:
var app = new Framework7({
navbar: {
hideOnPageScroll: true,
iosCenterTitle: false,
// added by me, not in the documentation
showOnPageScrollEnd: false,
},
});
// if you use it on toolbars:
var app = new Framework7({
toolbar: {
hideOnPageScroll: true,
// added by me, not in the documentation
showOnPageScrollEnd: false,
},
});
The link to the documentation: https://framework7.io/docs/navbar.html
Please note, that the property you use showBarsOnPageScrollEnd is not in the documentation - probably it's deprecated.
Related
I'm trying to build a website builder within the drag-and-drop abilities via using Vue3. So, the user will be playing with the canvas and generate a config structure that going to post the backend. Furthermore, the server-side will generate static HTML according to this config.
Eventually, the config will be like the below and it works perfectly. The config only can have HTML tags and attributes currently. Backend uses h() function to generate dom tree.
My question is: can I use .vue component that will generate on the server side as well? For example, the client-side has a Container.vue file that includes some interactions, styles, etc. How can the backend recognize/resolve this vue file?
UPDATE:
Basically, I want to use the Vue component that exists on the Client side on the backend side to generate HTML strings same as exactly client side. (including styles, interactions etc).
Currently, I'm able to generate HTML string via the below config but want to extend/support Vue component itself.
Note: client and server are completely different projects. Currently, server takes config and runs createSSRApp, renderToString methods.
Here is the gist of how server would handle the API:
https://gist.github.com/yulafezmesi/162eafcf7f0dcb3cb83fb822568a6126
{
id: "1",
tagName: "main",
root: true,
type: "container",
properties: {
class: "h-full",
style: {
width: "800px",
transform: "translateZ(0)",
},
},
children: [
{
id: "9",
type: "image",
tagName: "figure",
interactive: true,
properties: {
class: "absolute w-28",
style: {
translate: "63px 132px",
},
},
},
],
}
This might get you started: https://vuejs.org/guide/scaling-up/ssr.html#rendering-an-app
From the docs:
// this runs in Node.js on the server.
import { createSSRApp } from 'vue'
// Vue's server-rendering API is exposed under `vue/server-renderer`.
import { renderToString } from 'vue/server-renderer'
const app = createSSRApp({
data: () => ({ count: 1 }),
template: `<button #click="count++">{{ count }}</button>`
})
renderToString(app).then((html) => {
console.log(html)
})
I guess extract the template from request or by reading the submitted Vue file and use that as the template parameter value
I have question related to using context or prototype in Nuxt
I create a constant for 'modal' name like this:
export default Object.freeze({
MODAL_SHOWPRO: "MODAL_SHOWPRO",
})
I also created constant.js in plugin folder and already added to nuxt config.
import modals from '#/constants/modal';
export default ({ app }, inject) => {
inject('modalName', modals)
}
In component I can't call value from v-bind, it said : undefined MODAL_SHOWPRO
<Popup :id="$modalName.MODAL_SHOWPRO" />
but I can call it from $emit function something like this:
#click="$nuxt.$emit('showModal', {id: $modalName.MODAL_SHOWPRO})"
Can you let me know why and how to fix it?
Notice: It will work if:
I make data
{
modal: ''
}
and add to created:
async created() {
this.modalName = await this.$modalName
}
Nuxt is a meta-framework aimed at providing an universal app (server then client side). So, you need to think about both server and client.
In your code, you specified ssr: false, this is outdated and should rather be mode: 'client'. But setting so is still false because it means that the ENUM will not be available on the server (hence the error).
Setting it like this is more appropriate (regarding the nature of the plugin) and also fixes the issue
plugins: ['~/plugins/constant.js'],
More on Nuxt plugins: https://nuxtjs.org/docs/directory-structure/plugins#plugins-directory
How to open a web browser in expo rather than using the expo browser.I want open the browser in inside the app.
you can use the following library react-native-inappbrowser
follow the installation from the github page
import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn'
...
async openLink() {
try {
const url = 'https://www.google.com'
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.open(url, {
// iOS Properties
dismissButtonStyle: 'cancel',
preferredBarTintColor: '#453AA4',
preferredControlTintColor: 'white',
readerMode: false,
animated: true,
modalPresentationStyle: 'overFullScreen',
modalTransitionStyle: 'partialCurl',
modalEnabled: true,
// Android Properties
showTitle: true,
toolbarColor: '#6200EE',
secondaryToolbarColor: 'black',
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: false,
// Specify full animation resource identifier(package:anim/name)
// or only resource name(in case of animation bundled with app).
animations: {
startEnter: 'slide_in_right',
startExit: 'slide_out_left',
endEnter: 'slide_in_left',
endExit: 'slide_out_right'
},
headers: {
'my-custom-header': 'my custom header value'
},
waitForRedirectDelay: 0
})
Alert.alert(JSON.stringify(result))
}
else Linking.openURL(url)
} catch (error) {
Alert.alert(error.message)
}
}
...
you can check the example app here
for expo it becomes little bit complicated please check the related tutorial by Medium
if you want reading mode in ios please refer this link
reader-mode-webview-component-for-react-native
The expo-web-browser package opens an in app browser.
This worked for me with expo. I tried react-native-inappbrowser-reborn first, but isAvailable() was throwing an error.
import * as WebBrowser from 'expo-web-browser'
...
WebBrowser.openBrowserAsync(url, {showTitle: true})
I wanted to confirm whether I got my analytics tracking setup correctly in my single page application within the VueJS framework.
I am using the Vue plugin for Matomo which is found here:
https://github.com/AmazingDreams/vue-matomo
I imported the VueMatomo plugin in my main.js entry file like so:
import VueMatomo from 'vue-matomo';
Then, I assign the VueMatomo as a global method in my main.js file like so:
Vue.use(VueMatomo, {
// Configure your matomo server and site
host: 'https://matomo.example.com', <-- i configured this to match my real site
siteId: 5, <--- i configured this to match my real site
// Enables automatically registering pageviews on the router
router: router,
// Enables link tracking on regular links. Note that this won't
// work for routing links (ie. internal Vue router links)
// Default: true
enableLinkTracking: true,
// Require consent before sending tracking information to matomo
// Default: false
requireConsent: false,
// Whether to track the initial page view
// Default: true
trackInitialView: true,
// Changes the default .js and .php endpoint's filename
// Default: 'piwik'
trackerFileName: 'piwik',
// Whether or not to log debug information
// Default: false
debug: false
});
That gives me access to the Matomo API (_paq) in my components. However, this is where I am confused.
For example, I have a view called overview.vue which is the main page of the site. In this vue template, I have the following code in my created() hook. Since I am using a SPA, I need to somehow get the name of the page that the user is on and push it to the Matomo Reporting Tool. This is what I did:
<template>...snip...</template>
<script>
export default {
name: 'OverView',
created: function() {
window._paq.push(['setCustomUrl', '/' + window.location.hash.substr(1)]);
window._paq.push(['setDocumentTitle', 'Overview Page']);
window._paq.push(['trackPageView']);
}
};
</script>
Is the above adequate or is there a better lifecyle hook (mounted?) for the tracking code? Perhaps navigation guards are more appropriate?
Thank you
I got matomo working on my vue.js app (v 2.6.10).
I'm using a trial account from https://matomo.org/
In my main.js file:
// Analytics
import VueMatomo from "vue-matomo";
Vue.use(VueMatomo, {
host: "https://example.matomo.cloud", // switch this to your account
siteId: 1, // switch this as well you can find the site id after adding the website to the dashboard.
router: router,
enableLinkTracking: true,
requireConsent: false,
trackInitialView: true,
trackerFileName: "piwik",
debug: true
});
I can confirm that all of my nested routes are tracked. I can see what pages i viewed on my matomo dashboard.
To get custom events working just add the following:
this.$matomo.trackEvent("Event Category", "Event Name", "event action");
To give this some context, for my app i'm using it in a computed property:
computed: {
selectedMapDataType: {
get() {
return this.$store.state.mapDataType;
},
set(selected) {
this.$matomo.trackEvent("Dashboard Update", "Dashboard Data", selected);
this.$store.dispatch("updateMapDataType", selected);
}
},
...}
I have an enyo kind like this:
enyo.kind({
name:"branding", components: [
{name: "appName", content:"Stars of the East", classes:"heading"},
{content:AppConfig.tagline, classes:"subHeading"}]
});
I am trying to test this kind with the following jasmine describe.
describe("Test Branding Kind", function() {
it("should see enyo component from jasmine", function() {
var branding = enyo.kind({
kind: "branding"
});
expect(branding.$.appName.getContent()).toBe("Stars of the East");
})
});
I am getting an error. Can anyone guide me ?
You need to put your sub-components in a components array (you already have the closing bracket for the array in your code):
enyo.kind({
name:"branding", components: [
{name: "appName", content:"Stars of the East", classes:"heading"},
{content:AppConfig.tagline, classes:"subHeading"}]
});
You need to actually instantiate your kind to test it. enyo.kind() only creates the template. Try:
describe("Test Branding Kind", function() {
it("should see enyo component from jasmine", function() {
var localBranding = new branding();
expect(localBranding.$.appName.getContent()).toBe("Stars of the East");
})
});
You will also have to fix the problem that Art pointed out where you do not have the components block.
You will probably also need to actually render your components if they have UI elements you want to check. You may want to change the localBranding line to:
var localBranding = new branding().renderInto(<some element on your page>);
Finally, we suggest that kind names should be uppercase to distinguish them from instance names. name: "branding" would be name: "Branding" if you follow our advice.