In [ ]:
push!(LOAD_PATH,"/workspace/VueJS.jl/src/")
using VueJS,HTTP

Single File Component¶

Features¶

  • Hold SFC attributes
  • Component name (e.g. "myHome") is the component name and tag/placeholder that will be rendered ni the page <myHome/>
  • URL is where the file will be made available (by teh webserver)
  • Path is the file location in the repository
  • Prop is the prop that wil be included in the component placeholder (e.g.<myHome/ title="This is my title">)
In [ ]:
# Create an SFC record with the component ID and URL (made available by the webserver)
c = VueSFC("myPage", "/pages/About.vue")

# Create an SFC record with URL. ID will be the filename (without extension)
c = VueSFC("/pages/About.vue")

# Create an SFC record with URL and path
c = VueSFC("PageLayout", "layouts/PageLayout.vue", "web/layouts/PageLayout.vue")

# Create as SFC with a prop
c = VueSFC("PageLayout", "layouts/PageLayout.vue", props=Dict("title"=>"my title"))
c = VueSFC("layouts/PageLayout.vue", props=Dict("title"=>"my title"))
c = VueSFC("PageLayout", "layouts/PageLayout.vue", "web/layouts/PageLayout.vue", props=Dict("title"=>"my title"))

Single File Component page¶

Features¶

  • Create a page from a VueSFC list
  • If no placeholder is defined, the method will use the ID from the from the first element of the vector
  • All available propreties in a Page can be setup with kwargs
In [ ]:
# Create a page detailing placeholder (<myPage />) and available components
p = sfc_page("myPage", [
    VueSFC("myPage", "/pages/Home.vue"),
    VueSFC("myMenu", "/components/Menu.vue"),
    VueSFC("myComp", "/components/Component.vue")
])

# Create a page detailing available components. Placeholder will be the first element of the vector (<myPage />)
p = sfc_page([
    VueJS.VueSFC("myPage", "/pages/Home.vue"),
    VueJS.VueSFC("myMenu", "/components/Menu.vue")
], title="Home")

Single File Component page, from a repo folder (recommended usage)¶

Features¶

  • Create a Page from a repo folder (e.g. /web)
  • Only needs a placeholder (<Home />)
  • Will scan for all available SFC files (in the default folder or user defined paths)
In [ ]:
# Create a page with Form as a placeholder (<Form />) and using the default ('web') repository folder. Method will search for all available files in the folder and sub-folders.
p = sfc_page("Form")

# Create a page as above and using the available Page attributes (e.g. title, meta, etc.)
p = sfc_page("Form", title="FORM")

# Create a page from specific folder(s)
p = sfc_page("Form", "src/web")
p = sfc_page("Form", ["web", "src/handlers/web"])

# Create a page with specific files
p = sfc_page("Form", ["web/Page.vue", "components/Button.vue"])

Single File Component page response¶

Features¶

  • Simple and direct way to create a SFC Page and response
  • Only needs a placeholder (<Home />)
  • Will scan for all available SFC files (in the default folder or user defined paths)
In [ ]:
# Create a HTTP response 
r = sfc_response("Home")
r = sfc_response("Page", "src/web"))
r = sfc_response("Page", ["web/pages", "web/components/Button.vue"]))
r = sfc_response("About", title="About"))


# Using sfc_response in HTTP routes
HTTP.register!(routes, "GET", "/",      (req)->sfc_response("Home"))
HTTP.register!(routes, "GET", "/Page",  (req)->sfc_response("Page", "src/web"))
HTTP.register!(routes, "GET", "/Home",  (req)->sfc_response("Home", ["web/pages", "web/components/Button.vue"]))
HTTP.register!(routes, "GET", "/About", (req)->sfc_response("About", title="About"))