Rails6 프로젝트에 Framework7 적용하기

Rails6에 webpacker라는 게 생겼다.

일단 Framework7 설치하기

$ yarn add framework7

package.json이랑 yarn.lock에 framework7이 추가된다. node_modules도 열어보면 framework7이 보인다.

 

app/javascript/stylesheets/application.scss 생성

@import "framework7/framework7-bundle.min.css";

 

app/javascript/packs/application.js에 아래 코드 추가

require("../stylesheets/application.scss")

import Framework7 from "framework7/framework7-bundle.min.js"
window.Framework7 = Framework7

 

app/views/layouts/application.html.erb의 </body> 태그 바로 전에 코드 추가

(Framework7 docs의 예시 코드)

<script type="text/javascript">
  var app = new Framework7({
    // App root element
    el: '#app',
    // App Name
    name: 'My App',
    // App id
    id: 'com.myapp.test',
    // Enable swipe panel
    panel: {
      swipe: true,
    },
    // Add default routes
    routes: [
      {
        path: '/about/',
        url: 'about.html',
      },
    ],
    // ... other parameters
  });
</script>