Home Demo

Bellevue

Thanks for using Bellevue! This is a full-featured frontend project template for modern single-page applications built on Vue.js and Webpack.

Components

Bitmaps

Foo Foo

SVG assets

Loading indicators

...

Animations and transitions

Foo Bar

Filters

{{ 4.5 | ceil }} 5
{{ 4.5 | floor }} 4
{{ 4.5 | round }} 5
{{ 4.52383 | decimal }} 4.52
{{ 8 | decimal }} 8.00

8.21 8.21 8.2123

Read docs

Services

Network: online

Time: "2025-06-29T06:31:20.072Z"

Viewport: 1440 × 718 px

Read docs

Models

{
  "demoObject": {
    "title": "Foo",
    "description": "Bar",
    "titleAndDescription": "Foo: Bar"
  }
}

Read docs

Vuex

{
  "state": {
    "myModule": {
      "count": 0
    }
  },
  "getters": {
    "myModule.doubleCount": 0
  }
}

Read docs

buildConfig

{
  "isDebug": false,
  "offline": false
}

metaConfig

{
  "title": "Bellevue",
  "description": "A full-featured frontend project template for modern single-page applications built on Vue.js and Webpack.",
  "themeColor": "#42b983",
  "backgroundColor": "#fafafa",
  "defaultLocale": "en",
  "fallbackLocale": "en",
  "appStore": {
    "appId": "",
    "affiliate": "",
    "appArgument": ""
  },
  "formatDetection": {
    "telephone": "yes"
  },
  "mobile": true,
  "defaultTouchHighlight": false,
  "iosStatusBarStyle": "black-translucent",
  "viewport": {
    "width": "device-width",
    "height": null,
    "initial-scale": 1,
    "minimum-scale": null,
    "maximum-scale": 1,
    "user-scalable": "no",
    "viewport-fit": "cover"
  },
  "robotsMeta": []
}

pathsConfig

{
  "host": "https://example.com/",
  "staticAssetsPath": "/",
  "faviconFilename": "favicon.png",
  "appleIconFilename": "favicon.png",
  "scriptLinks": [],
  "styleLinks": [
    "//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono|Dosis"
  ],
  "prefetch": []
}

stylesConfig

{
  "colorVue": {
    "r": 79,
    "g": 192,
    "b": 141,
    "a": 1,
    "rgba": "rgba(79, 192, 141, 1)"
  },
  "colorVeryVeryLightGrey": {
    "r": 250,
    "g": 250,
    "b": 250,
    "a": 1,
    "rgba": "rgba(250, 250, 250, 1)"
  },
  "colorVeryLightGrey": {
    "r": 246,
    "g": 246,
    "b": 246,
    "a": 1,
    "rgba": "rgba(246, 246, 246, 1)"
  },
  "colorLightGrey": {
    "r": 234,
    "g": 234,
    "b": 234,
    "a": 1,
    "rgba": "rgba(234, 234, 234, 1)"
  },
  "colorGrey": {
    "r": 176,
    "g": 176,
    "b": 176,
    "a": 1,
    "rgba": "rgba(176, 176, 176, 1)"
  },
  "colorDark": {
    "r": 44,
    "g": 62,
    "b": 80,
    "a": 1,
    "rgba": "rgba(44, 62, 80, 1)"
  },
  "colorVeryDark": {
    "r": 16,
    "g": 16,
    "b": 16,
    "a": 1,
    "rgba": "rgba(16, 16, 16, 1)"
  },
  "fontSans": "Source Sans Pro",
  "fontSerif": "Droid Serif",
  "fontMono": "Roboto Mono",
  "fontDisplay": "Dosis",
  "padLooseVertical": 10,
  "defaultFont": "Source Sans Pro",
  "defaultFontSize": 18,
  "defaultColorBackground": {
    "r": 250,
    "g": 250,
    "b": 250,
    "a": 1,
    "rgba": "rgba(250, 250, 250, 1)"
  },
  "defaultColorText": {
    "r": 44,
    "g": 62,
    "b": 80,
    "a": 1,
    "rgba": "rgba(44, 62, 80, 1)"
  },
  "defaultColorLink": {
    "r": 79,
    "g": 192,
    "b": 141,
    "a": 1,
    "rgba": "rgba(79, 192, 141, 1)"
  },
  "defaultColorLinkActive": "color-saturate(#4fc08d)",
  "defaultColorBorder": {
    "r": 234,
    "g": 234,
    "b": 234,
    "a": 1,
    "rgba": "rgba(234, 234, 234, 1)"
  },
  "defaultShadowColor": {
    "r": 44,
    "g": 62,
    "b": 80,
    "a": 1,
    "rgba": "rgba(44, 62, 80, 1)"
  }
}