shunwitter

/* eslint-disable  */
import React, { useRef, useState, useEffect } from 'react'
import {
  Keyboard, Dimensions, Animated
} from 'react-native'

const KeyboardSafeView = ({ children, style }) => {
  const initialViewHeight = useRef(null)
  const animatedViewHeight = useRef(null)
  const [viewHeight, setViewHeight] = useState(null)

shunwitter

/* eslint-disable  */
import React, { useRef, useState, useEffect } from 'react'
import {
  Keyboard, Dimensions, Animated
} from 'react-native'

const KeyboardSafeView = ({ children, style }) => {
  const initialViewHeight = useRef(null)
  const animatedViewHeight = useRef(null)
  const [viewHeight, setViewHeight] = useState(null)

shunwitter

Rails.application.routes.draw do

  namespace :api, defaults: { format: :json } do
    post 'my_component_data_a'
    post 'my_component_data_b'
  end

end

shunwitter

# /api/my_api_controller.rb
class Api::MyApiController < Api::BaseController

  def my_component_a_data
    # Fetch data from rails and return json
    @my_data_a = { title: 'Hello world', body: 'Vue.js is simple and easy to use.' }
    render json: @my_data_a
  end

  def my_component_b_data

shunwitter

const Vue = require('vue')
const App = require('./components/App.vue')

// Convention: Global object for events
window.eventHub = new Vue()

new Vue({
  el: '#my-app',
  components: {
    app: App,

shunwitter

<template lang="pug">
  h1 {{title}}
  p {{body}}
</template>

<script>
  export default {
    // Convention: Component name is camel case
    name: 'MyComponentA',
    props: {},

shunwitter

<template lang="pug">
  #my-app
    .container
      my-component-a
      my-component-b
</template>

<style lang="sass?indentedSyntax" scoped>
  .container
    width: 800px //whatever